Chrome 移动浏览器中的文本垂直对齐错误[关闭]

【问题标题】：Wrong vertical align of text in Chrome Mobile browser [closed]Chrome 移动浏览器中的文本垂直对齐错误[关闭]
【发布时间】：2017-12-12 06:50:00
【问题描述】：

我有一个高度固定的 div，其中包含一些文本。 line-height = div 的高度。问题：在 Chrome Mobile 中，文本不能完全垂直居中。在 Firefox Mobile 中一切正常。请注意，我使用的是标准 Verdana 字体。

我发现其他一些网站也遇到了同样的问题。

我该如何解决这个问题，有什么建议吗？

提前致谢！

【问题讨论】：

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

【解决方案1】：

将以下 flex CSS 样式属性添加到您的特定 div 容器中，应该没问题。

.cells-block {
  font-family: Verdana;
  width:300px;
  height: 100px;
  background: red;
  display: flex;
  align-items: center;
  /* vertically   */
  justify-content: center;
  /* horisontally */
  text-align: center;
  /* addition: for text's lines */
}

<div class="cells-block">
  This is some text<br>Randomrandom stuff
</div>

【讨论】：