中间居中的文字内联

Question

如何在较大的文本后垂直居中？我不想依赖一些恒定的高度。有可能吗？

HTML：

<div>
    <span class="big">Big</span>
    <span class="small">Small</span>
</div>

CSS：

.big {
    font-size: 50px;
}

.small {
    font-size: 20px;
}

结果：

预期结果：

Answer 1

在课程vertical-align上使用.big规则

<强> CSS

.big {
    vertical-align: middle;
    font-size: 50px;
}

  

CSS中的vertical-align属性控制元素旁边的设置方式   一条线上的对方排成一行

<强> DEMO HERE

Answer 2

路易斯的回答让你大部分都在那里，但是小文字仍然太高了。如果你为小文本添加一个行高，并将其垂直对齐，它会完美地坐下来。

.big {
    vertical-align: middle;
    font-size: 50px;
}

.small {
    font-size: 20px;
    line-height: 20px;
    vertical-align: -25%;
}