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

【问题标题】：Issue with image and text alignment in ChromeChrome 中的图像和文本对齐问题
【发布时间】：2016-05-22 08:51:33
【问题描述】：

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

这是小提琴：

这是粘贴的代码：

<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 并且解决方案应该只涉及触摸主要元素 + 它的子元素。

【问题讨论】：

在我看来，您的标题不能很好地描述您的问题。也许你可以改写一下，这次不用脏话？
是的，对于标题很抱歉
这里好像有chrome迷，不知道为什么我的评论被删了。我不能批评谷歌产品吗？

标签： html css google-chrome vertical-alignment baseline

【解决方案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/

【讨论】：

我不能真正使用 line-height 进行居中，因为 main 的内容几乎可以是任何东西。构建一个 React 组件来一劳永逸地解决这种垂直布局的废话。
我编辑了答案。只需添加垂直对齐，它就可以与 flexbox 对齐一起使用。

【解决方案2】：

只需添加 float: left;它也可以在 Chrome 中运行...

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

【讨论】：