Comment aligner verticalement les éléments en HTML

Question

J'ai un bouton et un texte à côté, comme celui-ci,

---------------- 
|    | 
| Button |  Text 
|    | 
---------------- 

je voudrais avoir le texte aligné verticalement au centre du bouton. Comment dois-je faire cela en CSS?

Voici ma tentative:

http://jsbin.com/oduma4/4

J'ai trouvé deux problèmes avec cette approche:

1. Le texte est affiché en haut dans IE 6.
2. Les deux éléments écoulement hors de div parent donc cette disposition interférera avec d'autres divs.

Answer 1

Pour centrer le texte mis verticalement la ligne hauteur au même niveau que la hauteur, par exemple:

#form-actions{ height: 30px; } 
#text{ line-height: 30px; } 

Et mettre vertical-align-milieu:

#text{ line-height: 30px; vertical-align:middle; } 

Answer 2

Tant que l'élément que vous essayez de verti Cally align et tous ses frères et soeurs sont inline ou inline-block, il suffit d'utiliser vertical-align: middle.

Preview: http://jsfiddle.net/Wexcode/KceFF/