Alignement des polices dans l'étiquette

Question

Existe-t-il un moyen de modifier la propriété de texte à l'intérieur de label pour qu'elle touche la ligne de base? Dans l'exemple, l'état et la ville sont au-dessus de la ligne de base.

http://jsfiddle.net/6VzLR/

HTML:

<div id="leftContent"> 
    <div id="state"> 
     <label for="state">State:</label> 
     <select name="state"> 
      <option>State - Karnataka</option> 
     </select> 
    </div> 
    <div id="city"> 
     <label for="city">City:</label> 
     <select name="city"> 
      <option>City - Bangalore</option> 
     </select> 
    </div> 
</div><!--leftContent--> 

CSS:

#state label, #city label{ 
    width:40%; 
    display:inline-block; 
    margin: 3px 0 3px 6px; 
} 

Answer 1

Si vous spécifiez une hauteur pour le label vous pouvez utiliser line-height pour ajuster où le texte sera:

#state label, #city label{ 
    width:40%; 
    display:inline-block; 
    border:1px solid #000000; 
    margin: 3px 0 3px 6px; 
    line-height: 28px; 
    height: 20px; 
    vertical-align: bottom; 
} 

Voici le JSFiddle.

EDIT: Vous pouvez ajouter

#state select, #city select { 
    margin-bottom: 4px; 
} 

Ainsi, les boîtes de sélection sont positionnés les mêmes aussi bien.

Voici la mise à jour JSFiddle.

Answer 2

L'ordre de la marge s en CSS margin property est en haut à droite en bas à gauche. Il semble donc que vous définissez 0px pour la marge de droite, pas pour celle du bas. Essayez ceci:

margin: 3px 3px 0px 6px; 

Ou:

margin-bottom: 0px; 

Je persionally mieux explorer padding option si css.

Answer 3

I appliqué le CSS suivant à votre code HTML:

label, select { 
    font-family: arial; 
    font-size: 2.0em; 
    vertical-align: baseline; /* default value */ 
} 
label { 
    border: 1px solid gray; 
    width:40%; 
    display:inline-block; 
    margin: 3px 0 3px 6px; 
    text-align: right; 
} 

et a obtenu le résultat suivant: http://jsfiddle.net/audetwebdesign/3CQbq/

Le texte de l'étiquette et les éléments de sélection alignés le long d'une ligne de base commune, qui est plus évident si vous augmentez la taille de la police.

Toutefois, vous devez vous assurer que la même famille de polices et la même taille de police sont utilisées dans les champs label et select pour obtenir le même alignement. (Dans votre exemple, cela ne semble pas être un problème même si les polices diffèrent.)

Dans votre exemple, le texte est aligné sur la même ligne de base et le bas des deux boîtes s'aligne également le long d'une ligne horizontale commune. Cependant, la case entourant l'étiquette est plus grande que la case du groupe sélectionné, ce qui peut être ce que vous essayez de corriger.