Comment centrer un div verticalement?
J'ai un div
que je veux centrer horizontalement et verticalement.
Pour la question horizontale tout est parfait, mais j'ai un problème avec l'alignement vertical.
J'ai essayé ceci:
#parent {
display: table;
}
#child {
display: table-row;
vertical-align: middle;
}
mais cela ne fonctionne pas.
source d'informationauteur trrrrrrm
Vous devez vous connecter pour publier un commentaire.
Si vous n'avez qu'à prendre en charge les navigateurs qui prennent en charge
transform
(ou son fournisseur préfixé versions), utiliser ce un vieux truc bizarre à la verticale aligner les éléments.Pour la prise en charge des navigateurs plus anciens, vous pouvez utiliser une combinaison de ces éléments, mais ils peuvent être une douleur due à des différences dans le rendu
block
vstable
.Si votre taille est fixe et vous avez besoin pour soutenir ceux qui sont vraiment vieux, satanés navigateurs...
Si votre taille n'est pas fixe, il y a un solution de contournement.
Voir sur jsFiddle.
Ayant la propriété parent comme,
display:table
et de l'enfant bien quedisplay: table-cell
etvertical-align: middle
a fonctionné pour moi.Tout d'abord, le traitement de la non-table de balisage que des tables (avec display:table et amis) n'est pas cross-browser. Je ne sais pas lequel des navigateurs vous avez besoin de soutien, mais certainement IE6 ne pas le faire. Mais, si votre cible navigateur ne tout le soutien display:table, je peux vous donner quelques conseils.
La verticale de centrage de l'approche que vous êtes à la recherche pour les (à l'aide du tableau de mise en page) dépend de l'existence d'un TD vertical-align:middle, puis à l'intérieur d'un seul bloc élément verticalement centre. Donc, je pense que ce que vous voulez, c'est:
C'est ok pour utiliser table-cell sans entourant la table de la ligne et de la table, le navigateur déduit la table d'enrubannage éléments pour vous.
voici une autre manière, quand vous ne savez pas à l'intérieur de la div de taille ou autre, vous pouvez utiliser % ici et là, à fixer le "centrage" ....
l'idée est que votre valeur supérieure est la moitié de la hauteur de votre enfant de l'élément à créer le centrage de l'illusion
Voici le code:
et pour le style:
Ici vous pouvez le voir en action
http://jsfiddle.net/Wabxv/