在一個div中垂直居中跨度

Question

我有一個包含span的div，我希望span垂直和水平地與我的div的中心對齊。

這裏的小提琴：http://jsfiddle.net/RhNc2/1/

我已經試穿span並在div的vertical-alignmargin:auto，但它不工作

編輯：我的div和我的跨度沒有固定的高度，這取決於內容的，我已經把它固定在小提琴只是爲了告訴

Answer 1

垂直對齊是件棘手的事，我不知道是否有一個嘗試和真實的方式。過去幾年最可靠的技術是使用CSS表格佈局。這種方法唯一的缺點是它可能不適用於過時的瀏覽器。儘管如此，根據我的經驗，這可能是最好的整體解決方案。請參閱下面我舉的例子：

<style type="text/css"> 
    #container {  
     display:table;  
     border-collapse:collapse; 
     height:200px; 
     width:100%; 
     border:1px solid #000; 
    }   
    #layout {  
     display:table-row; 
    }   
    #content {  
     display:table-cell; 
     text-align:center; 
     vertical-align:middle;  
    }   
</style> 

<div id="container">  
    <div id="layout">  
     <div id="content"> 
      Hello world! 
     </div>  
    </div> 
</div> 

這裏有一個的jsfiddle：http://jsfiddle.net/aGKfd/2/

還有另一種技術，但它並不像上述技術的萬無一失。它涉及兩個容器，外部容器的位置設置爲相對，內部設置爲絕對。內膽你可以親近的使用絕對定位，但它需要一些調整，以得到恰到好處：

<style type="text/css"> 
    #vertical{ 
     position:absolute; 
     top:50%;  
     left:0; 
     width:100%; 
     text-align:center; 
    } 
    #container { 
     position:relative; 
     height:200px; 
     border:1px solid #000; 
    } 
</style>   
<div id="container"> 
    <div id="vertical"> 
     Hello world! 
    </div>    
</div> 

這裏有一個的jsfiddle：http://jsfiddle.net/6SWPe/

Answer 2

一下添加到div CSS：

display:table-cell; text-align:center 

工作小提琴是在這裏：http://jsfiddle.net/sdoking/DCT85/

CSS：

#myDiv { 
border:1px solid black; 
height:50px; 
width:200px; 
vertical-align:middle; 
display:table-cell; 
text-align:center 
} 

#mySpan { 
width:100%; 
border:thin blue solid 
} 

邊框是爲了清晰:)

Answer 3

使用的line-height =高度： http://jsfiddle.net/RhNc2/8/

Answer 4

這

#myDiv{ 
    border:1px solid black; 
    height:50px; 
    width:200px; 
} 

#mySpan{ 
    display:block; 
    text-align:center; 
    line-height:50px; 
} 

而且的jsfiddle：http://jsfiddle.net/Simo990/RhNc2/9/

編輯：由於您的div和跨度高度取決於內容，我的解決方案將無法正常工作，因爲它需要固定的高度和只有一行文本。只需尋找與position:absolute解決方案。

Answer 5

您也可以將這些樣式應用於包含<div>。 line-height解決方案假定您只需要一行文本即可居中。

#myDiv{ 
    border:1px solid black; 
    height:50px; 
    width:200px; 
    text-align:center; 
    line-height:50px; 
} 

的