极客观点
项目管理
HarmonyOS
各位大神小弟有一事请教：
代码如下：
<style type="text/css">
.oDiv{
width:50%;
font-size: 144px;
line-height:1em;
margin:0 auto;
border:2px solid #beceed;
}
.oDiv span{
font: 14px/1.2em '微软雅黑';
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="oDiv">
<span>却未曾感觉你在心口的鼻息<br/>我已经相信有些人我永远不</span>
</div>
</body>
执行结果中span并未垂直居中
但是将css代码改为：
.oDiv{
width:50%;
line-height:144px;
margin:0 auto;
border:2px solid #beceed;
}
.oDiv span{
font: 14px/1.2em '微软雅黑';
display: inline-block;
vertical-align: middle;
}
就垂直居中了，这是为什么？恳请各位大神指教！
vertical-align:middle 并不是垂直居中，而是把span的行框中点跟.oDiv的基线上1/2x处对齐，你oDiv的字体那么大，1/2x处当然很不明显居中了。
w3c的规定是这样的 https://www.w3.org/TR/CSS2/visudet.html#line-height
http://codepen.io/anon/pen/VaaovX