垂直對齊跨越兩行的元素的文本問題

Question

我想使用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; 
} 

通常得到.quote在#testimonial豎直中間，我會做：

.quote { line-height: 138px; } 

但是這打破了佈局，因爲.quote中的文字跨越多條線。

正如你所看到的，我試過做vertical-align: middle;，這也不起作用。

任何幫助表示讚賞。乾杯。

Answer 1

此網站：

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

Answer 2

該網站提供的options for vertical centering with css過多。

如果你可以設置.quote的高度，我認爲方法2將在這種情況下工作：

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

另一種選擇是使用display:table-cell; vertical-align:middle;方法在CSS，但該選項並不在IE瀏覽器，所以你還必須設置一個特定於IE的版本。

Answer 3

因爲沒有人的答案與表格單元格解決方案呢..

在這裏你去 - 用一個IE6/7的解決方案太（儘管它涉及yukky HTML黑客）作爲@thirtydot在評論中說，表顯示屬性不被IE7和下方支撐 -

，如果你不「不想/像多餘的HTML元素，你可以給IE7和下面的.quote一些頂級填充 - 所以，雖然它不會被垂直居中精確它可能是一個可接受的回落

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, Arial, 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> 

Answer 4

我recently found out使得已經未定義尺寸的東西垂直居中去得很好，vertical-align: middle;結合line-height: 0;。

看看這個demonstration fiddle。

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

Answer 5

你可以做到這一點與單跨簡單 http://jsfiddle.net/7ebLd/

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

的