垂直文本对齐在相对格

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

我该怎么办？

感谢，马蒂亚

来源

2012-05-07 pindol

[在一个div文本垂直对齐（可能重复http://stackoverflow.com/questions/9249359/text-vertical-align-in-a-div） –

最近刚刚所面临的问题，我想出了（如果你有这样做的情况下，你不能使用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/（我加了一些边界看到页面上的块）

来源

2012-05-07 17:38:45

我见过的更好的解决方案之一。这应该排在更高的位置。 – SouthShoreAK

垂直文本对齐在相对格

回答

相关问题