极客观点
项目管理
HarmonyOS
先看图：
主要问题是：怎么让左边黑色inline和右边的文字垂直居中，并且黑色inline中的文字也垂直居中？
html如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
max-width: 300px;
font-size: 32px;
line-height: 50px;
border: 1px solid black;
}
.tag {
display: inline;
color: white;
background: black;
}
.tag-inner {
font-size: 16px;
}
</style>
</head>
<body>
<div style="margin: 100px">
<div class="container">
<span class="tag">
<span class="tag-inner">哈哈</span>
</span>
<span>噜噜噜噜</span>
</div>
</div>
</body>
</html>再尝试解决的过程中，又碰到几个有疑问的点：
为什么container的高度是58px？行高设置了50px，边框1px，那正常应该是52px才对吧，在把tag元素去掉后，container的高度确实是回到了正确的52px。并且如果减小
tag-inner的font-size，container的高度反而会增加，这点又是为什么，和文本对齐方式有关吗？因为我发现给tag-inner设置vertical-align: middle之后，font-size的减小时不会再增加container的高度
为什么给tag-inner元素设置vertical-align: text-bottom的表现，反而是往上移动的感觉，不应该是往下移动吗？（这里为方便看位置，调大了tag元素的font-size）
主要问题
最简单粗暴的解决方案就是外部容器的
display设置为flex布局。然后设置align-items为center就好了。使用
line-height和vertical-align两个属性对其中文文本的时候都因为中文字体没有的基线和中线概念的问题（我印象中中文字体是没有基线概念的）导致没有办法很完美的做好文本内容的垂直居中（主要是中文和英文混排的场景下）。关于基线和部分的问题可以看张鑫旭大佬早期的一篇文章 👉 我对CSS vertical-align的一些理解与认识（一） « 张鑫旭-鑫空间-鑫生活
问题1： 为什么
.container的高度是58px？因为默认的
vertical-align属性就是按照baseline，也就是主要问题中提到的基线 来对齐的。.tag-inner元素的font-size越小，基线也就越靠下，有因为设置了固定的line-height:50px，因为vertical-align: baseline基线对齐的缘故，自然外部容器.container的高度会越来越大。所以你给.tag-inner元素的vertical-align属性设置为middle时候就不会增加高度了也是这个缘故。问题2： 为什么给
.tag-inner元素设置vertical-align:text-bottom的表现，反而是往上移动的感觉？你看一下这个配图里面的
text-bottom（底线）的位置你就明白为啥了。相关阅读