Mittlere Schaltflächenkomponente in der Next.js-App?
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; /* 悬停时的深蓝色 */
}