如何垂直居中两个弦？

Question

我有2个字符串彼此相邻。第二个字符串设置为font-size: 85%。这是下面截图中描述的丑陋结果。如何使第二个字符串对齐，使其相对于第一个字符串垂直居中？

.smaller_text {
  font-size: 85%;
}

some bigger text 
<span class="smaller_text"> some smaller text&#160;</span>

Answer 1

通过设置线高和垂直对齐，您可以获得所需的内容：

.smaller_text {
    ...
    vertical-align: middle;
}

<强> Demo

Answer 2

我的最爱：

body {
    font-size: 24px;
}
.liner {
    position: relative;
}

.smaller_text {
  font-size: 50%;
  position: absolute;
  top: 50%;
  left: auto;
  transform: translate(0, -50%);
}

<div class="liner">
some bigger text
<span class="smaller_text"> some smaller text&#160;</span>
</div>