J'ai un problème avec la hauteur de ligne que je n'arrive pas à comprendre.
Le code suivant va centrer une image dans un div:
CSS
.bar {
height: 800px;
width: 100%;
line-height:800px;
background-color: #000;
text-align: center;
}
.bar img {
vertical-align: middle;
}
HTML
<div class="bar">
<img src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>
Cependant, si je change la hauteur de ligne à 100%, alors la hauteur de ligne ne prend pas effet (ou du moins ne devient pas 100% du div).
Quelqu'un sait-il ce que je fais mal?
Je sais que cette question est ancienne, mais j'ai trouvé ce qui pour moi est la solution de contournement parfaite.
J'ajoute ce css à la div que je veux centrer:
Cela fonctionne à chaque fois et c'est propre.
Edit: Juste pour terminer, j'utilise scss et j'ai un mixin pratique que j'inclus sur chaque parent qui est des enfants directs que je veux centrer verticalement:
Explication complète:
div:before
ajoutera un élément à l'intérieur du div, mais avant l'un de ses enfants. Lors de l'utilisation:before
ou:after
nous devons utiliser unecontent:
déclaration sinon rien ne se passera, mais pour notre objectif, le contenu peut être vide. Ensuite, nous disons à l'élément d'être aussi grand que son parent, tant que la hauteur de son parent est définie et que cet élément est au moins un bloc en ligne.vertical-align
définit la position verticale de soi par rapport au parent, par opposition àtext-align
cela fonctionne différemment.La
@mixin
déclaration est pour les utilisateurs sass et elle serait utilisée comme ceci:la source
Lorsque vous utilisez le pourcentage comme hauteur de ligne, il n'est pas basé sur le conteneur div, mais plutôt sur la taille de la police.
la source
line-height: 100% serait un moyen facile de centrer verticalement des éléments, s'il était calculé par rapport au conteneur, mais ce serait trop facile, donc cela ne fonctionne pas.
Donc, à la place, c'est juste une autre façon de dire hauteur de ligne: 1em (non?)
Une autre façon de centrer verticalement un élément serait:
la source
peut-être pas joli, mais ça marche, et c'est sémantique;
display: table-cell donne à un élément la capacité unique de table d'aligner verticalement (au moins je pense que c'est unique)
la source
Il s'agit d'une réponse très tardive, mais dans les navigateurs modernes, en supposant que l'élément parent représente également 100% de la hauteur de l'écran, vous pouvez utiliser l'
vh
unité de fenêtre. VIOLONPrise en charge du navigateur
la source
Cette solution fonctionne dans IE9 et au-dessus. Tout d'abord, nous définissons la position supérieure de l'enfant à 50% (milieu du parent). Ensuite, en utilisant la
translate
règle, décalez l'enfant de la moitié de sa hauteur réelle. Le principal avantage est que nous n'avons pas besoin de définir la taille de l'enfant, elle est calculée dynamiquement par le navigateur. JSFiddlela source
Une approche plus moderne consiste à utiliser flexbox pour cela, c'est plus simple et plus propre. Cependant, flexbox est un paradigme complètement différent de ce que
inline-block
,float
ouposition
était autrefois.Pour aligner les éléments à l'intérieur de
.parent
vous, procédez comme suit:C'est à peu près tout. Les enfants des
flex
parents sont automatiquement convertis en éléments enfants flexibles.Vous devriez en savoir plus sur flexbox, un bon point de départ est cette feuille de triche: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
la source
Vous pouvez définir la hauteur de ligne en fonction de la hauteur de cet élément. Si la hauteur de l'élément 200px signifie que vous devez définir la hauteur de ligne sur 200px pour centrer le texte.
la source