跨越两行的元素的文本垂直对齐问题

如何解决跨越两行的元素的文本垂直对齐问题

|| 我想使用CSS在元素中间对齐一些文本。这是我的标记：

<div id=\"testimonial\">
    <span class=\"quote\">Some random text that spans two lines</span>
</div>

以及相关的CSS：

#testimonial {
    background: url(\'images/testimonial.png\') no-repeat;
    width: 898px;
    height: 138px;
    margin: 0 auto;
    margin-top: 10px;
    text-align: center;
    padding: 0px 30px 0px 30px;
}

.quote {
    font-size: 32px;
    font-family: \"Times New Roman\",Verdanna,Arial,sans-serif;
    vertical-align: middle;
    font-style: italic;
    color: #676767;
    text-shadow: 1px 1px #e7e7e7;
}

通常，我会在

#testimonial

的垂直中间得到

.quote

，我会这样做：

.quote { line-height: 138px; }

但这会破坏布局，因为

.quote

中的文本跨越多行。 如您所见，我已经尝试过

vertical-align: middle;

，但这也不起作用。 任何帮助表示赞赏。干杯。     

解决方法

        我最近发现，带有

vertical-align: middle;

和

line-height: 0;

的物体的垂直居中效果非常好。 看看这个示范小提琴。 HTML：

<div id=\"testimonial\">
    <span><span class=\"quote\">Some random text<br />that spans two lines</span></span>
</div>

CSS：

#testimonial {
    background: #333 url(\'images/testimonial.png\') no-repeat;
    width: 898px;
    height: 138px;
    margin: 0 auto;
    margin-top: 10px;
    text-align: center;
    padding: 0 30px 0 30px;
    line-height: 138px;
}
#testimonial>span {
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
}
.quote {
    font-size: 32px;
    font-family: \"Times New Roman\",Verdanna,Arial,sans-serif;
    font-style: italic;
    color: #676767;
    text-shadow: 1px 1px #e7e7e7;
    line-height: 32px;
}

    ,        您可以一次跨度来简化它 http://jsfiddle.net/7ebLd/

#testimonial {
    height: 138px;
    line-height: 138px;
}
span {
    display: inline-block;
    line-height: 19px;
    vertical-align: middle;
}

    ,        因为没有人用表格单元解决方案来回答它。 就在这里-也使用IE6 / 7解决方案（尽管它涉及到yukky HTML hack），如@thirtydot在评论中所述，IE7及以下版本不支持表显示属性- 如果您不希望/不喜欢多余的HTML元素，则可以在

.quote

上给IE7和顶部填充下面的内容-这样虽然它不会准确地垂直居中，但可以接受 CSS：

#testimonial {
    background: #eee url(\'images/testimonial.png\') no-repeat;
    width: 898px;
    height: 138px;
    margin: 10px auto 0;
    padding: 0 30px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.quote {
    font-size: 32px;
    font-family: \"Times New Roman\",Verdana,sans-serif;
    font-style: italic;
    color: #676767;
    text-shadow: 1px 1px #e7e7e7;
}

IE CSS：

<!--[if lte IE 7]>
<style type=\"text/css\" media=\"screen\">
#testimonial i {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.quote {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}
</style>
<![endif]-->

HTML：

<div id=\"testimonial\">
    <i></i>
    <span class=\"quote\">Some random text <br> that spans two lines</span>
</div>

    ,        该网站提供了很多用于CSS垂直居中的选项。 如果您可以在

.quote

上设置高度，我认为方法2在这种情况下会起作用：

.quote {
     position:absolute;
     top:50%;
     height:240px;
     margin-top:-120px; /* negative half of the height */
}

另一个选项是在CSS中使用

display:table-cell; vertical-align:middle;

方法，但是此选项在IE中不起作用，因此您还必须设置IE特定的版本。     ,        这个网站： http://www.emblematiq.com/blog/vertical_align_with_css/ 结果： http://www.emblematiq.com/blog/vertical_align_with_css/assets/03.html 使用以下标记/ css使用

display: table-cell

，

vertically-align: middle

方法将多行垂直居中：

<div id=\"wrapper\">
    <img src=\"0.gif\" alt=\"stuff\" id=\"fixed\" />
    <div id=\"floating\"><div><div>
<p>Middle aligned text goes right here and it does wrap nicely at the end of the line</p>
    </div></div></div>
</div>

p {
    margin:0;
    padding:0;
}
#wrapper {
    width:550px;
    border:1px solid #666;
    padding:10px;
    height:300px;
}
#fixed {
    float:right;
    width:200px;
    height:300px;
    background:#666;
    display:block;
}
#wrapper>#floating { /*display:table for Mozilla & Opera*/
    display:table;
    position:static;
}
#floating { /*for IE*/
    width:300px;
    height:100%;
    background:#EAEAEA;
    position:relative;
}
#floating div { /*for IE*/
    position:absolute;
    top:50%;
}
#floating>div { /*for Mozilla and Opera*/
    display:table-cell;
    vertical-align:middle;
    position:static;
}
#floating div div {
    position:relative;
    top:-50%;
}