在Next.js应用中居中按钮组件？

Question

我在我的nextjs页面中使用了一个按钮，它位于自己的行中。我希望按钮出现在页面的中间，因为我认为这样在PC和移动设备上都会看起来最好，但无论我尝试什么，按钮元素似乎都无法从页面最左边的原始位置移动。

手动设置margin-left和margin-right为特定的百分比，将按钮尽可能靠近页面中心，而不会将按钮的文本挤入下一行，这是我找到的唯一能使按钮移动的方法，但它看起来并不好，并且不实用。根据页面的状态，按钮内的文本可能具有不同的长度，因此硬编码的左右边距实际上并不能将按钮居中。

我尝试过'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>
  );

.pd-container {
    align-items: center;
}

import React from 'react';
import classNames from 'classnames/bind';
import styles from './CartButton.module.css'; 

const cx = classNames.bind(styles);

const CartButton = ({ onAddToCart }) => {
    return <button onClick={onAddToCart} className={cx('cart-button')}>Add To Cart</button>;
};
  
export default CartButton;

.cart-button {
    background-color: #007bff; /* 按钮背景的蓝色 */
    color: white;
    padding: 12px 24px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 添加轻微的阴影 */
    transition: background-color 0.3s ease; /* 悬停时平滑过渡 */
    text-align: center;
  }
  
  .cart-button:hover {
    background-color: #0056b3; /* 悬停时的深蓝色 */
  }

Answer 1

我觉得你忘记了CSS中的display:flex属性。 你需要在pd-container类中添加display:flex; flex-direction:column; justify-content:center; align-items:center;。 你可以在https://www.w3schools.com/css/css3_flexbox.asp中了解display:flex。 没有display:flex，align-items和justify-content属性是不起作用的。 justify-content处理display-direction的主轴，align-items处理display-direction的交叉轴。 所以，如果display-direction是行，justify-content处理水平轴，align-items处理垂直轴。 希望对你有帮助。 谢谢。