控制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; }