web-dev-qa-db-fra.com

CSS: Comment aligner verticalement un "label" et une "entrée" dans un "div"?

Considérons 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 la label et la input au milieu de la div (verticalement)?

csshtmlvertical-alignment
78
Misha Moroshko
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 modifier la hauteur de la div, modifier la hauteur du champ de texte et modifier la taille de la police afin que tout reste au centre.

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

90
Marc-François

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 multibles dans le flux flexible, vous pouvez utiliser align-self pour aligner des éléments individuels différemment de 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>

il est également très facile de 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>
57
Holger Will

Cela fonctionne sur plusieurs navigateurs, offre plus d’accessibilité et vient 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>
11
albert

Je sais que cette question a été posée il y a plus de deux ans, mais pour tous 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 de la div. L'avantage étant que vous pouvez maintenant changer la propriété d'affichage de la div comme bon vous semble, par exemple en inline-block, et son contenu restera centré verticalement. La solution acceptée nécessite que vous considériez la div comme une cellule de tableau. Cela devrait fonctionner parfaitement, multi-navigateur.

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

À votre santé!

8
MusikAnimal

Utilisez padding sur le div ( en haut et en bas ) et vertical-align:middle sur le label et input.

example at http://jsfiddle.net/VLFeV/1/

6
Gabriele Petrioli

Enveloppez l’étiquette et entrez-la dans une 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;
3
Trevor

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

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