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/