Css垂直對齊

Question

我有div內單列順序的按鈕。按鈕計數是可變的。我想垂直對齊按鈕。 「vertical-align：middle」不起作用。我怎樣才能做到這一點？

分隔高度是固定的。 http://jsfiddle.net/WmD3L/ 如何垂直對齊這些按鈕？

Answer 1

如果按鈕具有固定的高度，則可以使用行高將文本置於中間。

例如

#button { 
    height: 50px; 
    line-height: 50px; //Must be the same as height to vertically align to the middle 
} 

您還可以使用

#button { 
    display: table-cell; 
    vertical-align: middle; 
} 

但我不認爲這很不幸工程跨瀏覽器。

Answer 2

在我看來This is the best way（這是IE8 +）：

HTML：

<div class="block"> 
    <div class="centered"> 
    <div><input type="submit" value="ABC"/></div> 
    <div><input type="submit" value="ABC"/></div> 
    <div><input type="submit" value="ABC"/></div> 
    </div> 
</div> 

CSS：

/* Can be any width and height */ 
.block { 
    height:500px; 
    text-align: center; 
} 

/* The ghost, nudged to maintain perfect centering */ 
.block:before { 
    content:''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 

/* The element to be centered, can be any width or height */ 
.centered { 
    display: inline-block; 
    vertical-align: middle; 
    width: 300px; 
} 

演示：http://jsfiddle.net/WmD3L/13/