垂直文本在相对 div 中对齐

Question

我有一个带有 position:relative 的 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）。它也将具有 float 属性。因为对于浮动元素，您不能使用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;    
}

请注意，我将 a 的显示从 block 更改为 inline-block，否则，没有 vertical-align。

还有一个小技巧来展示它：http://jsfiddle.net/r5RFx/（我添加了一些边框来查看页面上的块）