垂直文本在相對div中對齊

Question

我有一個位置div：relative; 包含在固定寬度的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屬性。

當只有一行時，外部div上單獨的line-height可以正常工作。 當你面對可能是多線的東西時，解決方案是使用兩個線高。

使用的標記如下：

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

請注意，我將from block的顯示更改為inline-block ，否則沒有vertical-align 。

並且有點小提示它： http ： //jsfiddle.net/r5RFx/ （我添加了一些邊框來查看頁面上的塊）