texte Harmoniser verticalement à l'intérieur d'une étiquette div

Question

Example of problem http://img638.imageshack.us/img638/3733/97914817.jpg

Je suis en train de recoder une de mes anciennes formes. Il était rempli de tableaux que je veux remplacer par CSS. Cependant, j'ai du mal à avoir du texte et un élément de formulaire alignés verticalement ensemble. Comme l'image montre le texte par défaut de commencer en haut au lieu de dans le milieu. Les reflets bleus autour de la rangée sont l'interprétation/la sélection de ce qui se passe.

Je possède des divs label et input, tous deux flottants à gauche, à l'intérieur d'un div appelé #light, qui se trouve dans un conteneur général. Voici à quoi ressemble mon code CSS:

#contentBox{ 
width: 600px; 
float: left; 
background-color: #e2e2e2; 
overflow: auto; 
border-color: #c5c5c5; 
border-width: 1px; 
border-style: solid; 
font-size: 12px; 
} 
#light { 
float: left; 
width: 500px; 
padding: 15px; 
background-color: #e2e2e2; 
margin: 7px; 
border-color: #c5c5c5; 
border-width: 1px; 
border-style: solid; 
vertical-align: middle; 
} 
input { 
float: right; 
width: 20em; 

} 
label { 
float: left; 
text-align: right; 
vertical-align: baseline; 
} 

Une idée du problème? J'ai essayé d'échanger le vertical-aligner dans différents divs, flottant dans des directions différentes, se débarassant de l'étiquette mais je finis juste avec plus de problèmes plutôt que moins.

Answer 1

Habituellement, pour résoudre ce problème, j'utiliser la propriété line-height:

Ex:

div{width:600px;font:normal normal 12px/30px Arial, Helvetica, sans-serif;} 

Cela définira la police à 12px, et la ligne de hauteur à 30px, garder la police aligner verticalement dans les 30px de sa ligne.

Answer 2

Vous ne pouvez pas utiliser vertical-align sur des éléments sauf s'ils sont des cellules de tableau (ou affichés comme tels) comme expliqué par this article. Définissez line-height sur la hauteur de l'élément si vous ne disposez que d'une ligne de texte.

Answer 3

L'alignement vertical du texte peut être incroyablement ennuyeux ou incroyablement facile.

Si la taille de tous les éléments impliqués est connue, le mieux est de définir des marges/marges manuelles sur le texte lui-même pour s'assurer qu'il est aligné. Si le contenu que vous voulez centrer verticalement est dynamique, this is your best bet.

Answer 4

Vous ne savez pas, mais votre balise d'entrée est définie sur "float: right", donc sa hauteur ne sera pas prise en compte par le parent. Par conséquent, la hauteur du parent est probablement la hauteur de l'étiquette (je suppose que dreamweaver n'interprète pas correctement ce que font les navigateurs). Essayez de supprimer le flottant sur la balise d'entrée et voyez si cela fait une différence.

Answer 5

L'alignement vertical peut être appliqué uniquement aux éléments en ligne. La meilleure solution est de modifier votre code HTML et de le rendre comme dans this examples

Answer 6

Vous pouvez opter pour une solution « pas cher » et appliquer une padding-top à l'étiquette divs.