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