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 label et le input au milieu de la 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>L'avantage de cette méthode est qu'elle permet de modifier la hauteur de l'image. div Si l'on veut, on peut modifier la hauteur du champ de texte et la taille de la police, et tout restera toujours au milieu.
La méthode est élégante :) est-ce que quelqu'un sait si cette méthode est compatible avec les navigateurs ?
Pour IE, je pense qu'il ne fonctionne que sur IE8 ou mieux. Pour les autres navigateurs, c'est parfait.
Je n'étais pas au courant de l'existence de la display: table-cell . Cela est-il pris en charge par certains navigateurs ?
Cela fonctionne avec tous les navigateurs, offre plus d'accessibilité et nécessite moins de balises. Remplacez la 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>
Cela ne fonctionnera évidemment pas pour une étiquette à deux lignes. Et si vous êtes sûr que l'étiquette est toujours d'une seule ligne, il existe des millions d'autres solutions.
La question portait sur une étiquette d'une seule ligne, et j'ai répondu en conséquence. je ne suis pas sûr de votre point de vue ou de vos intentions, mais si x est si évident, vous devriez en faire un million d'exemples. au moins pour que vous puissiez vous réjouir de ma réponse et ressentir la puissance de vos millions de victoires. bravo.
C'est la meilleure réponse pour les étiquettes à ligne unique. La spécification indique : "Si l'attribut for n'est pas spécifié, mais que l'élément label a un descendant d'élément associé à la forme étiquetable, le premier de ces descendants dans l'ordre de l'arbre est le contrôle étiqueté de l'élément label". Il s'agit donc de la seule approche permettant d'omettre l'attribut for y id pour une plus grande simplicité.
Je sais que cette question a été posée il y a plus de deux ans, mais pour les 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 nous contentons d'ajouter un line-height égale à celle de la hauteur de la div. L'avantage est que vous pouvez maintenant modifier la propriété d'affichage de la div comme bon vous semble, pour qu'elle devienne inline-block par exemple, et son contenu restera centré verticalement. La solution acceptée consiste à traiter la div comme une cellule de tableau. Cela devrait fonctionner parfaitement, quel que soit le navigateur.
Le seul autre avantage est qu'il n'y a qu'une règle CSS de plus au lieu de deux :)
Santé !
Utilice padding sur le div ( haut et bas ) et vertical-align:middle sur le label y input .
exemple à http://jsfiddle.net/VLFeV/1/
Cela ne fonctionne pas sur le jsfiddle. J'ai modifié la hauteur du div et le contenu à l'intérieur n'a pas bougé du tout. Y a-t-il quelque chose qui m'échappe ?
À mon avis, les mises en page ne devraient pas avoir une hauteur de pixel fixe Les mises en page devraient s'articuler de manière fluide autour du contenu. Cependant, je viens d'une époque où les navigateurs mettaient à l'échelle la taille des textes lors des zooms avant et arrière. Les navigateurs récents mettent à l'échelle l'ensemble de la page, de sorte que la fixation de la hauteur des pixels fonctionne un peu mieux. Cependant, il existe de toutes nouvelles raisons d'éviter de fixer la hauteur des pixels par exemple, les techniques de mise en page réactive. C'est pourquoi je préférerais cette méthode.
Donnez à la div un rembourrage en haut, réduisez la hauteur de la div. http://jsfiddle.net/s2qBw/4/
div {
height: 35px;
padding-top:15px;
border: 1px solid blue;
}
<div>
<label for='name'>Name:</label>
<input type='text' id='name' />
</div>Le plus simple que je connaisse.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
1 votes
À ma connaissance, la réponse est "vous ne pouvez pas", et la façon la plus paresseuse de contourner le problème est d'utiliser une simple fonction
<table>et appliquervalign='middle'à son<td>s.