Next.js 앱의 가운데 버튼 구성요소가 있나요?

Question

내 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>
  );

Answer 1

CSS의 display:flex 속성을 잊어버린 것 같습니다. pd-container 클래스에 display:flex-direction:column; justify-content:center;를 추가해야 합니다. https://www.w3schools.com/css/css3_flexbox.asp에서 display:flex에 대해 알아볼 수 있습니다. display:flex가 없으면 align-items 및 justify-content 속성은 효과가 없습니다. justify-content는 표시 방향의 주축을 처리하고 align-items는 표시 방향의 교차 축을 처리합니다. 따라서 표시 방향이 행인 경우 justify-content는 가로 축을 처리하고 align-items는 세로 축을 처리합니다. 도움이 되길 바랍니다. 감사해요.