在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處理垂直軸。 希望對你有幫助。 謝謝。