只希望垂直居中,而不希望水平居中,那么可以只使用 align-items: center;
或 Tailwind 的 items-center
类。
const PropertyAmenities = ({ features }) => { return ( <div className={"flex flex-col"}> <p className={"canela font-normal text-2xl sm:text-3xl mb-4 sm:mb-6"}>Amenities</p> <div className="container mx-auto"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-4"> {features.split('\n').map((feature, index) => ( <div key={index} className="relative pl-4 sm:pl-6 flex items-center"> <span className="diamond"/>{feature.replaceAll("\n","")} </div> ))} </div> </div> </div> ); };