Css Alignement vertical

Question

J'ai des boutons avec une seule colonne à l'intérieur de div. Le nombre de boutons est modifiable. Je veux aligner les boutons verticalement. "vertical-align: middle" n'est pas un travail. Comment puis je faire ça?

La hauteur de div est fixe. http://jsfiddle.net/WmD3L/ Comment puis-je aligner ces boutons verticalement?

Answer 1

Si le bouton a une hauteur fixe, vous pouvez utiliser la ligne de hauteur pour placer le texte au milieu.

par exemple.

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

Vous pouvez également utiliser

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

Mais je ne pense pas que cela fonctionne navigateur cross malheureusement.

Answer 2

This is the best way à mon avis (Il est 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; 
} 

Démo: http://jsfiddle.net/WmD3L/13/