我想使用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;,但也无效.
任何帮助表示赞赏.干杯.