내 nextjs 페이지에서 자체 행에 있는 버튼을 사용하고 있습니다. 버튼을 페이지 중앙에 표시하고 싶은 이유는 PC와 모바일 모두에서 가장 잘 보일 것이라고 생각하기 때문입니다. 하지만 아무리 노력해도 버튼 요소가 화면 왼쪽 끝에 있는 원래 위치에서 이동할 수 없는 것 같습니다. 그 페이지.

왼쪽 여백과 오른쪽 여백을 특정 비율로 수동으로 설정하면 버튼의 텍스트가 다음 줄로 밀리지 않고 버튼이 페이지 중앙에 최대한 가깝게 이동됩니다. 이것이 버튼을 이동시키는 유일한 방법입니다. , 하지만 보기에도 좋지 않고 실용적이지 않습니다. 페이지 상태에 따라 버튼 안의 텍스트 길이가 다를 수 있으므로 하드 코딩된 왼쪽 및 오른쪽 여백이 실제로 버튼의 중앙에 위치하지 않습니다.

'margin: auto;', text-align/align-items/justify-content: center;를 시도했고 심지어 div에 버튼을 래핑하고 CSS를 사용하여 버튼이 아닌 div의 중앙에 배치하려고 했습니다. .

현재 코드는 다음과 같습니다.

return (
    <div className={cx('pd-container')}>
      <h1 className={cx('pd-title')}>{product.title}</h1>
      <img className={cx('pd-img')} src={`/productPhotos/${product.id}.jpeg`} alt={product.title} />
      <p className={cx('pd-price')}>Price: ${product.price}</p>
      {isCheckout ? (
        <CheckoutButton onCheckout={handleCheckout}/>
      ) : (
        <CartButton onAddToCart={handleAddToCart} />
      )}
    </div>
  );