Komponen butang tengah dalam apl Next.js?

Question

Saya menggunakan butang dalam halaman nextjs saya yang berada pada barisnya sendiri. Saya mahu butang muncul di tengah-tengah halaman kerana saya fikir ia akan kelihatan terbaik pada kedua-dua PC dan mudah alih, tetapi tidak kira apa yang saya cuba, elemen butang kelihatan tidak boleh bergerak dari kedudukan asalnya di hujung kiri halaman tersebut.

Menetapkan jidar-kiri dan jidar-kanan kepada peratusan tertentu secara manual menggerakkan butang sedekat mungkin dengan bahagian tengah halaman tanpa memerah teks butang ke baris seterusnya Ini adalah satu-satunya cara yang saya temui untuk membuat butang itu bergerak , tetapi ia Ia tidak kelihatan baik dan tidak praktikal. Bergantung pada keadaan halaman, teks di dalam butang mungkin mempunyai panjang yang berbeza, jadi jidar kiri dan kanan yang dikod keras sebenarnya tidak memusatkan butang.

Saya telah mencuba 'margin: auto;', text-align/align-items/justify-content: center;, dan juga membungkus butang dalam div, cuba menggunakan css untuk memusatkannya pada div, bukan butang .

Ini kod semasa saya:

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

Saya rasa anda terlupa sifat display:flex dalam CSS. Anda perlu menambah display:flex-direction:column; Anda boleh belajar tentang display:flex di https://www.w3schools.com/css/css3_flexbox.asp. Tanpa ciri paparan:flex, align-item dan justify-content tidak mempunyai kesan. justify-content mengendalikan paksi utama arah paparan, dan item penjajaran mengendalikan paksi silang arah paparan. Jadi, jika arah paparan ialah baris, justify-content mengendalikan paksi mendatar dan item align-item mengendalikan paksi menegak. Semoga ia membantu anda. Terima kasih.