时间戳

首页 > 解决方案 > 如何标准化跨浏览器的文本不一致的垂直对齐方式？

html - 如何标准化跨浏览器的文本不一致的垂直对齐方式？

问题描述

下面的文本在容器内垂直居中显示。

正确行为的例子

问题是文本的垂直对齐方式在平台/浏览器之间不一致。在 macOS 上的 Firefox、Android 上的 Chrome 和 Windows 上的 Chrome 上，文本如下所示：

不正确行为的例子

请注意文本如何稍微靠近蓝色容器的顶部边缘。

我尝试了使用 / 的不同组合或不同组合的各种修复，vertical-align: middle但无济于事。heightline-height

这是代码（jsfiddle）：

html:

<h1 class="title">
  This is a title
</h1>

CSS：

.title {
  display: inline;
  padding: 5px;
  color: white;
  background-color: blue;
}

标签： htmlcsscross-browser

解决方案

推荐阅读