Tailwind垂直居中Grid每个网格项

14 min read

只希望垂直居中,而不希望水平居中,那么可以只使用 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>
    );
};