Why are logos not inline with each other?

Question

So i have a list of client logos, and i used one of tailwinds components to list them on my website, it should have made everything inline, but for some reason the logos aren't. Even though they are all the same dimensions some logos appear bigger then others, and when i check on inspect element it shows the logos as boxes(everything in html is boxes lol) and the boxes are inline with each other but not the actual logos. It looks crooked as people would say.

I tried modifying the dimensions and seeing if that would help my case, but in fact that did NOT do anything, so i came here.

Here is the Client Component code if any of you are wondering:

import React from 'react'
import accentureLogo from '../assets/images/accenture.svg'
import open from '../assets/clients/open.svg'
import equi from '../assets/clients/equi.svg'
import mol from '../assets/clients/mol.svg'
import cox from '../assets/clients/cox.svg'

function Clients() {
  return (
    <div className='flex justify-center items-center text-center'>
      <section className="mt-28 flex justify-center items-center text-center">
        <div className="py-8 lg:py-16 mx-auto max-w-screen-xl px-4">
          <div className="flex flex-wrap justify-center items-center space-x-8 space-y-4 md:space-y-0 text-gray-500 dark:text-gray-400">
            <a href="#" className="flex justify-center items-center">
              <img className='h-9 object-contain hover:text-gray-900 dark:hover:text-white' src={mol} alt="MOL" />
            </a>
            <a href="#" className="flex justify-center items-center">
              <img className='h-9 object-contain hover:text-gray-900 dark:hover:text-white' src={open} alt="Open" />
            </a>
            <a href="#" className="flex justify-center items-center">
              <img className='h-9 object-contain hover:text-gray-900 dark:hover:text-white' src={accentureLogo} alt="Accenture" />
            </a>
            <a href="#" className="flex justify-center items-center">
              <img className='h-9 object-contain hover:text-gray-900 dark:hover:text-white' src={cox} alt="Cox" />
            </a>
            <a href="#" className="flex justify-center items-center">
              <img className='h-9 object-contain hover:text-gray-900 dark:hover:text-white' src={equi} alt="Equi" />
            </a>
          </div>
        </div>
      </section>
    </div>
  )
}

export default Clients

And here is a screenshot of how it looks on my END https://imgur.com/a/gPcNSME

Does anyone know the answer to why it does this?

Answer 1

This isn't a CSS issue, it's an image issue. If you make all the logo images the same height, and then visually center the logo inside that height (in an image editor), then it'll look visually aligned on the page. Here's an image that hopefully will clarify. Again, do this in an image editor, your code is exactly what it should be already.