CSS: Comment aligner verticalement une «étiquette» et une «entrée» à l'intérieur d'un «div»?

Considérez le code suivant :

HTML:

<div>
    <label for='name'>Name:</label>
    <input type='text' id='name' />
</div>

CSS:

div {
    height: 50px;
    border: 1px solid blue;
}

Quelle serait la méthode la plus simple pour placer le labelet le inputau milieu du div(verticalement)?

div {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    border: 1px solid red;
}

<div>
    <label for='name'>Name:</label>
    <input type='text' id='name' />
</div>

Les avantages de cette méthode sont que vous pouvez changer la hauteur du div, changer la hauteur du champ de texte et changer la taille de la police et tout restera toujours au milieu.

http://jsfiddle.net/53ALd/6/

une approche plus moderne consisterait à utiliser css flex-box.

div {
  height: 50px;
  background: grey;
  display: flex;
  align-items: center
}

<div>
  <label for='name'>Name:</label>
  <input type='text' id='name' />
</div>

un exemple plus complexe ... si vous avez des éléments multi-éléments dans le flux flexible, vous pouvez utiliser align-self pour aligner des éléments individuels différemment sur l'alignement spécifié ...

div {
  display: flex;
  align-items: center
}

* {
  margin: 10px
}

label {
  align-self: flex-start
}

<div>
  <img src="https://de.gravatar.com/userimage/95932142/195b7f5651ad2d4662c3c0e0dccd003b.png?size=50" />
  <label>Text</label>
  <input placeholder="Text" type="text" />
</div>

c'est aussi super facile à centrer horizontalement et verticalement:

div {
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background: grey;
  display: flex;
  align-items: center;
  justify-content:center
}

<div>
  <label for='name'>Name:</label>
  <input type='text' id='name' />
</div>

Cela fonctionne entre les navigateurs, offre plus d'accessibilité et est livré avec moins de balisage. abandonner le div. Enveloppez l'étiquette

label{
     display: block; 
     height: 35px; 
     line-height: 35px; 
     border: 1px solid #000; 
}

input{margin-top:15px; height:20px}

<label for="name">Name: <input type="text" id="name" /></label>

Je sais que cette question a été posée il y a plus de deux ans, mais pour les téléspectateurs récents, voici une solution alternative, qui présente quelques avantages par rapport à la solution de Marc-François:

div {
    height: 50px;
    border: 1px solid blue;
    line-height: 50px;
}

Ici, nous ajoutons simplement un line-heightégal à celui de la hauteur du div. L'avantage étant que vous pouvez maintenant changer la propriété d'affichage du div comme bon vous semble, inline-blockpar exemple, et son contenu restera centré verticalement. La solution acceptée nécessite que vous traitiez le div comme une cellule de tableau. Cela devrait fonctionner parfaitement, multi-navigateur.

Le seul autre avantage étant qu'il ne s'agit que d'une règle CSS de plus au lieu de deux :)

À votre santé!

Utiliser paddingsur le div( haut et bas ) et vertical-align:middlesur le labelet input.

exemple sur http://jsfiddle.net/VLFeV/1/

Enveloppez l'étiquette et entrez dans un autre div avec une hauteur définie. Cela peut ne pas fonctionner dans les versions IE inférieures à 8.

position:absolute; 
top:0; bottom:0; left:0; right:0;
margin:auto;

Vous pouvez utiliser la display: table-cellpropriété comme dans le code suivant:

div {
     height: 100%;
     display: table-cell; 
     vertical-align: middle;
    }