垂直居中溢出文本

Question

我已經水平居中一些溢出文本（實際上我發現這在堆棧溢出）。我試圖垂直居中它無濟於事。

的HTML：

<div id="outer"><div id="inner"><div id="text">some text that will overflow</div></div></div> 

這裏的CSS：

#outer { 
    display: block; 
    position: relative; 
    left: 100px; 
    width: 100px; 
    border: 1px solid black; 
    background-color: silver; 
    height: 150px; 
} 

#inner { 
    /* shrink-to-fit width */ 
    display: inline-block; 
    position: relative; 
    /* shift left edge of text to center */ 
    left: 50%; 
} 

#text { 
    /* shift left edge of text half distance to left */ 
    margin-left: -50%; 
    /* text should all be on one line */ 
    white-space: nowrap; 
} 

我有一個適應小提琴這裏： http://jsfiddle.net/HfT72/

沒有人有什麼想法？

Answer 1

Working JSFiddle，雖然我不知道這個解決方案對您是否有用。

我將#inner包裝設置爲top: 50%;，並將#text設置爲position:relative，然後將其替換爲top:-8px（16px字體高度的一半）。

可能有更好的解決方案，但垂直居中很少有乾淨的解決方案。

編輯：Updated JSFiddle顯示我的解決方案和上述之間的區別。調整預覽窗口的大小以查看我的意思。