CSS alignement des travées, les entrées et les boutons
Je suis à la recherche d'un moyen d'aligner un certain nombre d'éléments (les travées, les entrées et les boutons), telle que, malgré leur diversité de taille, de leur verticale du point milieu est sur la même ligne horizontale:
Comment puis-je mettre cela en CSS? Voici le fichier HTML à jouer avec:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<style>
.content { font-size: 18px; border: 1px dotted blue; }
.content input, .content button { font-size: 40px; float: left; }
.label { border: 1px dotted red; float: left; }
.clear { clear: both; }
</style>
</head>
<body>
<div class="content">
<span class="label">Label: </span><input type="text">
<span class="label">More text: </span><input type="text">
<button type="submit">Submit Me</button>
<div class="clear"></div>
</div>
</body>
</html>
Tada! brunildo.org/test/inline-block.html - découvrez le
vertical-align: middle
tests.OriginalL'auteur Parand | 2011-05-12
Vous devez vous connecter pour publier un commentaire.
Que d'autres (David Nguyen et thirtydot) ont dit, ajoutant
vertical-align:middle;
permettra d'accomplir l'effet que vous êtes après tant que vous vous débarrasser de la flotte qui sont actuellement dans votre code. L'ajout dedisplay:inline-block;
vous permettra d'avoir un meilleur contrôle sur les dimensions, et je ne sais pas si vous avez été la planification sur elle, mais je serais certainement d'échanger votre<span class="label">
réelles<label>
balises.label
vsspan
, pas sûr que c'est une bonne idée de changer tous lesspan
pourlabel
: stackoverflow.com/questions/2059861/...OriginalL'auteur iamnotoriginal
Définir les principaux
div
'sline-height:
hauteur de plus grand élément en px, puis définissezvertical-align: middle
. Vous pouvez avoir à définirdisplay:inline
oudisplay:inline-block
sur les sous-éléments.Qui devrait fonctionner.
J'ai remarqué que les éléments d'entrée n'obtenez pas aligné - ils sont à gauche en haut. Je peux mettre à leur hauteur et ils vont regarder à droite, mais est-il un moyen de les centrer, sans les mettre à pleine hauteur?
Vous pourriez avoir à ajouter un peu de marge ou de rembourrage.
Se débarrasser de la flotte! jsfiddle.net/GJmnj
OriginalL'auteur SickHippie
Votre durée, de saisie et le bouton de la nécessité de la propriété:
vertical-align:middle;display:inline
OriginalL'auteur David Nguyen