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

Question

好吧，所以我正在与垂直对齐作斗争并且处于精神崩溃的边缘。我的 hacky 解决方案最终似乎以其他方式起作用，但是 Chrome 以某种方式搞砸了基线。

这是 fiddle:

这是粘贴的代码：

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

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

     </div>

   </div>
</div>

css:

div.outer{

}
div.main{
  height:51px;

  display:inline-block;
  border:1px solid red;
}
div.img{
  background-image:url("https://digiluovuus.files.wordpress.com/2010/04/media_httpkotiwelhoco_cfizk-scaled5001.jpg?w=409&h=517");
  background-size:100%;
  width:41px;
  height:51px;
  display:inline-block;
}

在 firefox 上工作正常，但在 Chrome 上（新版本似乎将版本号隐藏到我无法搜索的地方）。

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

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

.img 和 .main 需要 display:inline-block 并且解决方案应该只涉及触摸主要元素 + 它的子元素。

Answer 1

我认为您的问题是将 flexbox 与 inline-block 元素混合在一起。解决方案是删除 flexbox 并添加 vertical-align。它将在所有浏览器中工作：

https://jsfiddle.net/53272b1v/11/

 div.main,
 div.img{
    vertical-align:top;
 }

编辑

只需添加 vertical-align 属性:

https://jsfiddle.net/53272b1v/14/

Answer 2

只需添加 float: left;它在 Chrome 到...

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

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

Issue with image and text alignment in Chrome

html

css

google-chrome

vertical-alignment

baseline

编辑