1

我有一个 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>

我能怎么做？

谢谢， 马蒂亚

4

1 回答 1

4

最近遇到了这个问题，我想出的解决方案（如果你必须在不能使用的情况下这样做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高的行（继承自rolloverdiv）。它也将具有 float 属性。因为使用浮动元素，您不能使用vertical-align. 在该范围内，我们的链接将具有 11 像素的行高和垂直对齐中间。那是跨度的中间。它就在那里。

所需的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，否则为 no vertical-align。

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

于 2012-05-07T17:38:45.663 回答