相关疑难解决方法(0)

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

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

<div id="testimonial">
    <span class="quote">Some random text that spans two lines</span>
</div>
Run Code Online (Sandbox Code Playgroud)

和相关的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;
}
Run Code Online (Sandbox Code Playgroud)

通常要进入.quote垂直中间#testimonial,我会这样做:

.quote { line-height: 138px; }
Run Code Online (Sandbox Code Playgroud)

但这会打破布局,因为文本.quote跨越多行.

正如你所看到的,我已经尝试过这样做vertical-align: middle;,但也无效.

任何帮助表示赞赏.干杯.

html css xhtml

7
推荐指数
2
解决办法
1万
查看次数

标签 统计

css ×1

html ×1

xhtml ×1