如何使用 Flexbox 将图像与标题元素对齐，使其在所有浏览器中看起来都相同？

发布于 2025-01-16 13:18:22 字数 948 浏览 2 评论 0原文

我在使用 Flexbox 以在浏览器之间保持一致的方式将图标图像与标题对齐时遇到问题。

浏览器之间的差异可以在这里看到：在此处输入图像描述

如您所见，图像在所有浏览器上的对齐方式都不同，尤其是在 Firefox 上。我可以忍受 Chrome/Safari 的差异，但 Firefox 一直是我从事的许多设计中的一个问题。差异可能看起来很小，但非常明显，尤其是在较大的字体大小上。

我可能可以通过一些 ::before、position:absolute、transform:translate() 等黑客技术来解决这个问题，但我想我我想知道是否有任何简单而干净的方法来解决这种差异，同时仍然使用 Flexbox？

用于生成（Jsfiddle）上图的代码：

HTML

<div class="container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/6/69/How_to_use_icon.svg"/>
  <h1>
  AAA
  </h1>
</div>

CSS

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.container h1 {
  font-size: 72px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
}

原文

I'm having issues with aligning an icon image with a header using flexbox in a way that is consistent between browsers.

The differences between browsers can be seen here:
enter image description here

As you can see, the image is aligned differently on all browsers but especially so on Firefox. The Chrome/Safari difference I can live with, but Firefox has been an issue for a lot of designs I've worked on. The difference might seem small, but it is very noticeable, especially on bigger font sizes.

I could probably work around this with some ::before, position: absolute, transform: translate(), etc hacking, but I guess I'm wondering if there is any simple and clean way to fix this disparity while still using flexbox?

The code used to generate (Jsfiddle) the above image:

HTML

<div class="container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/6/69/How_to_use_icon.svg"/>
  <h1>
  AAA
  </h1>
</div>

CSS

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.container h1 {
  font-size: 72px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
}

分享到QQ

分享到微博