Composant du bouton central dans l'application Next.js ?

Question

J'utilise un bouton dans ma page nextjs qui se trouve sur sa propre ligne. Je veux que le bouton apparaisse au milieu de la page car je pense que cela sera plus beau sur PC et mobile, mais peu importe ce que j'essaye, l'élément bouton ne semble pas pouvoir bouger de sa position d'origine à l'extrême gauche de la page.

Régler manuellement les marges gauche et droite sur des pourcentages spécifiques déplace le bouton aussi près que possible du centre de la page sans presser le texte du bouton dans la ligne suivante. C'est la seule façon que j'ai trouvée pour faire bouger le bouton. , mais ça n'a pas l'air bien et ce n'est pas pratique. Selon l'état de la page, le texte à l'intérieur du bouton peut être de longueurs différentes, de sorte que les marges gauche et droite codées en dur ne centrent pas réellement le bouton.

J'ai essayé 'margin: auto;', text-align/align-items/justify-content: center;, et même enveloppant le bouton dans un div, en essayant d'utiliser CSS pour le centrer sur le div, pas sur le bouton .

Voici mon code actuel :

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

Je pense que vous avez oublié la propriété display:flex en CSS. Vous devez ajouter display:flex; flex-direction:column; justifier-content:center; align-items:center; Vous pouvez en savoir plus sur display:flex sur https://www.w3schools.com/css/css3_flexbox.asp. Sans les propriétés display:flex, align-items et justifier-content n'ont aucun effet. justifier-content gère l'axe principal de la direction d'affichage et align-items gère l'axe transversal de la direction d'affichage. Ainsi, si la direction d'affichage est une ligne, justifier-le contenu gère l'axe horizontal et align-items gère l'axe vertical. J'espère que cela vous aidera. Merci.