下面的文本在容器内垂直居中显示。
问题在于,文本的垂直对齐在各个平台/浏览器之间不一致。在macOS的Firefox,Android的Chrome和Windows的Chrome上,文本如下所示:
注意文本如何稍微靠近蓝色容器的顶部边缘。
我尝试使用vertical-align: middle
或height
/ line-height
的不同组合进行各种修复均无济于事。
以下是代码(jsfiddle):
html:
<h1 class="title">
This is a title
</h1>
css:
.title {
display: inline;
padding: 5px;
color: white;
background-color: blue;
}