问题垂直对齐跨越两行的元素的文本 [英] Problem vertically aligning text of an element that spans two lines

问题描述

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

I want to align some text in the middle of my element using CSS. This is my markup:

<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;
}

通常获取 .quote 在 #testimonial 的垂直中间，我会：

Usually to get .quote in the vertical middle of #testimonial, I'd do:

.quote { line-height: 138px; }

但是这打破了布局，因为 .quote 跨越多行。

But this breaks the layout because the text in .quote spans more than one line.

正如你所看到的，我已经尝试过 vertical-align：middle; ，也不起作用。

As you can see I've tried doing vertical-align: middle; and that doesn't work either.

任何帮助。干杯。

推荐答案

我最近发现垂直居中的未定义尺寸的东西非常好， vertical-align：middle; 结合 line-height：0; 。

I recently found out that vertical centering of something which has undefined dimensions goes very well with vertical-align: middle; in combination with 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;
}

这篇关于问题垂直对齐跨越两行的元素的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！