html - Chrome 移动浏览器中的文本垂直对齐错误

Question

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

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

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

提前致谢!

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