Html Chrome中的图像和文本对齐问题

好吧，所以我正在与垂直对齐作斗争，并且处于精神崩溃的边缘。我的黑客解决方案最终似乎能在其他方面发挥作用，但Chrome不知怎么搞砸了基线

这是小提琴：

以下是粘贴的代码：

<div class="outer">
<div class="img"></div>
   <div class="main">

     <div style="display:flex;height:100%;align-items:center;">
       VITTUSAATANA

     </div>

   </div>
</div>

在firefox上运行良好，但在Chrome上运行（新版本似乎将版本号隐藏到了我无法搜索的地方）

文本应与图片的中间对齐，其父元素的中间+父元素应与图片对齐。这就是我在Firefox上看到的

但在Chrome上，文本的父元素会向下拖动，以便文本与图像底部对齐

---

.img和.main需要显示：内联块，解决方案应该只涉及主元素+它的子元素。

我认为您的问题在于将

flexbox

与

内联块

元素混合。解决方案是移除flexbox并添加

垂直对齐

。它将在所有浏览器中工作：

编辑 只需添加

垂直对齐

属性：

---

我认为您的问题在于将

flexbox

与

内联块

元素混合在一起。解决方案是移除flexbox并添加

垂直对齐

。它将在所有浏览器中工作：

编辑 只需添加

垂直对齐

属性：

---

只需添加float:left；它在Chrome中也起作用

<div style="display:flex;height:100%;align-items:center;float:left;">VITTUSAATANA</div>

维图萨塔纳

---

只需添加float:left；它在Chrome中也起作用

<div style="display:flex;height:100%;align-items:center;float:left;">VITTUSAATANA</div>

维图萨塔纳

---

在我看来，你的标题并不能很好地描述你的问题。也许你可以换个说法，这次不用骂人？是的，很抱歉这个标题看起来这里有chrome粉丝，我不知道为什么我的评论被删除了。我不能批评谷歌产品？在我看来，你的标题并不能很好地说明你的问题。也许你可以换个说法，这次不用骂人？是的，很抱歉这个标题看起来这里有chrome粉丝，我不知道为什么我的评论被删除了。我不能批评谷歌的产品？我真的不能用线条高度来做定心，因为主要的内容几乎可以是任何东西。构建一个React组件来一劳永逸地解决这个垂直布局的废话。我编辑了答案。只需添加垂直对齐，它与flexbox对齐一起工作。我不能真正使用线高度进行居中，因为main的内容几乎可以是任何内容。构建一个React组件来一劳永逸地解决这个垂直布局的废话。我编辑了答案。只需添加垂直对齐，即可与flexbox对齐一起使用。

<div style="display:flex;height:100%;align-items:center;float:left;">VITTUSAATANA</div>