在组件中使用顺风图像不会居中

Question

我正在尝试将我的文本与我创建的网格的图像对齐，但由于某种原因它无法对齐。

技能.jsx

<div className='grid grid-cols-3 gap-0 mt-10 m-auto '>
            {images.map((image) => (
                <div key={image.id} className='h-full w-full'>
                    <img src={image.img} alt={image.name} className='w-4/12 h-4/12  my-5 border-4 border-black justify-center items-center' />
                    <h2 className='text-center'>{image.name}</h2>
                </div>
            ))}
        </div>

我正在努力为我的技能列表打造一个漂亮美观的外观。老实说，如果有人有更好的建议来完成这个组件，我也会接受。有一段时间一直坚持想出一些好东西。

Answer 1

您好，您可以使用它垂直对齐它

<div class='grid grid-cols-3 gap-0 mt-10 m-auto'>
<div class='h-full w-full flex flex-col items-center justify-center'>
    <img src="https://cdn.icon-icons.com/icons2/601/PNG/256/html_5_icon-icons.com_55763.png" alt="HTML icon" class='w-4/12 h-4/12 my-5 border-4 border-black justify-center items-center' />
    <h2 class='text-center'>HTML</h2>
</div>
 <div class='h-full w-full flex flex-col items-center justify-center'>
    <img src="https://cdn.icon-icons.com/icons2/601/PNG/256/html_5_icon-icons.com_55763.png" alt="HTML icon" class='w-4/12 h-4/12 my-5 border-4 border-black justify-center items-center' />
    <h2 class='text-center'>HTML</h2>
</div>