Images won't center using tailwind in component

Question

I'm trying to align my text with my images for the grid that I've created but for what ever reason it won't line up.

Skills.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>

Grid of Images

I'm trying to make a nice presentlable look for my list of skills. To be honest if anyone has a better recommendation for going about doing this component, I'd take that too. Been stuck on coming up with something good for a while.

Answer 1

Hello you can align it vertically by using this

<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>