Next.js 앱의 가운데 버튼 구성요소가 있나요?
내 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>
);