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>

我该怎么办？

谢谢，Mattia

Answer 1

最近遇到了这个问题，我提出的解决方案（如果必须在不能使用display:table-cell的情况下进行）是添加一个小标记并使用{{1属性。

当只有一行时，外部div上的

line-height单独工作。当你面对可能是多线的东西时，解决方案是使用两个线高。

使用的标记如下：

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 div）。它也将具有浮动属性。因为使用浮动元素，您无法使用rollover。在这个范围内，我们将链接的线高为11px，垂直对齐 - 中间。那是跨度的中间。它就是。

需要的css如下：

vertical-align

请注意，我已将.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。

有点小提示：http://jsfiddle.net/r5RFx/（我添加了一些边框以查看页面上的块）

垂直文本在相对div中对齐

1 个答案: