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

Question

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

这是 fiddle :

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

这是粘贴的代码:

<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/