控制div中某些文本的垂直位置？

Question

我在div中有两个短语。这两个短语在div的中间垂直对齐，并且它们具有不同的字体大小。我希望第二个短语低于其当前位置（略低于中间位置）。如何在不使用javascript的情况下将div中的第二个短语推低？

<div>
Phrase 1 - Phrase 2
</div

Answer 1

这样的东西？

<div>
Phrase 1 - <span style="position:relative;top:4px;">Phrase 2</span>
</div>

Answer 2

Live Demo

我的演示可能不完全是你如何设置的，但这个想法应该有效：

• 在第二个短语上设置position: relative和top: ?px。

<强> HTML：

<div class="phrase">
    Phrase 1 - <span class="p2">Phrase 2</span>
</div>

<强> CSS：

.phrase {
    font-size: 16px;
    background: #ccc;
    height: 40px
}
.p2 {
    font-size: 24px;
    position: relative;
    top: 11px
}

Answer 3

<div>
Phrase 1 - <span id="phrase2">Phrase 2</span>
</div>

和CSS确实有奇迹：

#phrase2 { position: relative; top: .2em; }