为什么徽标彼此不对齐？

Question

所以我有一个客户徽标列表，我使用了一个顺风组件将它们列在我的网站上，它应该使所有内容都内联，但由于某种原因徽标没有。尽管它们的尺寸都相同，但有些徽标看起来比其他徽标大，当我检查检查元素时，它会将徽标显示为框（html 中的所有内容都是框，哈哈），并且框彼此内联，但不是实际的徽标。正如人们所说，它看起来很弯曲。

我尝试修改尺寸，看看这是否对我的情况有帮助，但事实上这没有做任何事情，所以我来到这里。

如果您想知道的话，这里是客户端组件代码：

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

这是我的 END 上的屏幕截图 https://imgur.com/a/gPcNSME

有人知道为什么这样做吗？

Answer 1

这不是 CSS 问题，而是图像问题。 如果您使所有徽标图像具有相同的高度，然后将徽标在视觉上居中于该高度内（在图像编辑器中），那么它将在页面上看起来视觉上对齐。 这是一张希望能够澄清的图片。 再次，在图像编辑器中执行此操作，您的代码正是它应该的样子。