Css 垂直文本在相对div中对齐

Css 垂直文本在相对div中对齐,css,vertical-alignment,css-position,Css,Vertical Alignment,Css Position,我有一个职位的div:relative;包含在固定宽度的div中。在它里面(带相对位置的div)有一些文本。问题是我需要将它垂直居中,在某些情况下,文本由一行组成,在其他情况下由两行组成。我的css代码如下: .rollover{ position: relative; width: auto; background-color: #000; opacity: 0.5; height: 40px; overflow: hidden; padding-left: 10px; } .rollove

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


我该怎么办


谢谢,Mattia最近遇到了这个问题,我提出的解决方案(如果您必须在无法使用
显示:表格单元格
)是添加一点标记并使用
行高
属性

行高
当只有一行时,仅在外部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>​
.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;    
}
请注意,我将块的显示从
块更改为
内联块
,否则,没有
垂直对齐


(我添加了一些边框以查看页面上的块)

最近遇到了这个问题,我提出了一个解决方案(如果在无法使用
显示:表格单元格
的情况下必须这样做),就是添加一点标记并使用
行高
属性

行高
当只有一行时,仅在外部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>​
.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;    
}
请注意,我将块的显示从
块更改为
内联块
,否则,没有
垂直对齐


还有一个小提琴来展示:(我添加了一些边框以查看页面上的块)

可能重复我见过的一个更好的解决方案的可能重复。这应该排得更高。这是我见过的最好的解决方案之一。这应该排得更高。