垂直文本對齊在相對格

Question

我有一個與位置div：相對;包含在固定寬度的div中。在它內部（相對於位置的div）有一些文本。問題是我需要將它居中放置在垂直方向，在某些情況下，文本由一行組成，而另一些則由兩行組成。我的CSS代碼是這樣的：

.rollover{ 
position: relative; 
width: auto; 
background-color: #000; 
opacity: 0.5; 
height: 40px; 
overflow: hidden; 
padding-left: 10px; 
} 

.rollover a{ 
font-family: lucida; 
font-size: 10px; 
color: #FFF; 
display: block; 
line-height: 11px; 
float: left; 
text-decoration: none; 
} 

和我的HTML代碼是：

<div class="rollover"> 
    <a href="">ONE LINE TEXT</a> 
</div> 

或

<div class="rollover"> 
    <a href="">FIRST LINE<br/>SECOND LINE</a> 
</div> 

我該怎麼辦？

感謝，馬蒂亞

Answer 1

最近剛剛所面臨的問題，我想出了（如果你有這樣做的情況下，你不能使用display:table-cell）是加一點標記和使用該解決方案line-height屬性。

line-height單獨在外部div工作正常時，只有一條線。當你遇到可能是多行的東西時，解決方案是使用兩行高度。

所使用的標記是：

<div class="rollover"> 
    <span> 
     <a href="">ONE LINE TEXT</a> 
    </span> 
</div> 
<div class="rollover"> 
    <span> 
     <a href="">FIRST LINE<br/>SECOND LINE</a> 
    </span> 
</div>​ 

通知所添加的<span>。

訣竅是跨度將是線條高度40px（繼承自rollover div）。它也會具有浮動屬性。因爲使用浮動元素，您不能使用vertical-align。在該範圍內，我們將鏈接到11px的行高和垂直對齊中間。這是跨度的中間。就在那裏。

所需的CSS如下：

.rollover{ 
    position: relative; 
    width: auto; 
    background-color: #000; 
    opacity: 0.5; 
    height: 40px; 
    overflow: hidden; 
    padding-left: 10px; 
    line-height:40px; 
} 

.rollover span{ 
    float: left; 
} 
.rollover a{ 
    font-family: lucida; 
    font-size: 10px; 
    color: #FFF; 
    line-height: 11px; 
    text-decoration: none; 
    vertical-align:middle; 
    display:inline-block;  
} 

注意，我改變的顯示從block到inline-block，否則，沒有vertical-align。

而且一點點搗鼓來顯示它：http://jsfiddle.net/r5RFx/（我加了一些邊界看到頁面上的塊）