Mittlere Schaltflächenkomponente in der Next.js-App?

Question

Ich verwende auf meiner nextjs-Seite eine Schaltfläche, die sich in einer eigenen Zeile befindet. Ich möchte, dass die Schaltfläche in der Mitte der Seite erscheint, weil ich denke, dass sie sowohl auf dem PC als auch auf Mobilgeräten am besten aussieht, aber egal, was ich versuche, das Schaltflächenelement scheint sich nicht von seiner ursprünglichen Position ganz links zu bewegen die Seite.

Durch manuelles Festlegen von „Rand links“ und „Rand rechts“ auf bestimmte Prozentsätze wird die Schaltfläche so nah wie möglich an die Mitte der Seite verschoben, ohne dass der Text der Schaltfläche in die nächste Zeile gequetscht wird. Dies ist die einzige Möglichkeit, die ich gefunden habe, um die Schaltfläche zu verschieben , aber es sieht nicht gut aus und ist nicht praktisch. Je nach Zustand der Seite kann der Text innerhalb der Schaltfläche unterschiedlich lang sein, sodass der hartcodierte linke und rechte Rand die Schaltfläche nicht wirklich zentriert.

Ich habe 'margin: auto;', text-align/align-items/justify-content: center; ausprobiert und sogar die Schaltfläche in ein Div eingeschlossen und versucht, sie mithilfe von CSS auf dem Div und nicht auf der Schaltfläche zu zentrieren .

Das ist mein aktueller Code:

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处理垂直轴。 希望对你有帮助。 谢谢。