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

Question

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

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

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

提前致谢！

Answer 1

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

＆＃13;

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;