Méthodes pour centrer verticalement un élément : 1. Utilisez l'attribut "line-height" pour obtenir le centrage vertical d'un élément en ligne sur une seule ligne ; 2. Utilisez la disposition flexible pour obtenir un centrage vertical ; +marge négative" pour obtenir que les éléments au niveau du bloc soient centrés verticalement.
Centrés verticalement
1. Les éléments en ligne sur une seule ligne sont centrés verticalement
<. 🎜> 2. Centrer verticalement les éléments en ligne multilignes ①Utilisez la disposition flexible (flex) Utilisez la disposition flexible pour obtenir un centrage vertical, où flex-direction: column définit la direction de l'axe principal comme verticale . Cette méthode présente des problèmes de compatibilité avec les anciens navigateurs.
<div class="parent">
<p>Dance like nobody is watching, code like everybody is.
Dance like nobody is watching, code like everybody is.
Dance like nobody is watching, code like everybody is.</p>
</div>
<style>
.parent {
height: 140px;
display: flex;
flex-direction: column;
justify-content: center;
border: 2px dashed #f69c55;
}
</style>
Copier après la connexion
②Utiliser la disposition du tableau (table) Utiliser l'alignement vertical : middle de la disposition du tableau pour obtenir le centrage vertical des éléments enfants
<div class="parent">
<p class="child">The more technology you learn, the more you realize how little you know.
The more technology you learn, the more you realize how little you know.
The more technology you learn, the more you realize how little you know.</p>
</div>
<style>
.parent {
display: table;
height: 140px;
border: 2px dashed #f69c55;
}
.child {
display: table-cell;
vertical-align: middle;
}
</style>
Copier après la connexion
3 Les éléments au niveau du bloc sont centrés verticalement①Utilisez une marge absolue + négative (hauteur et largeur connues)En positionnant de manière absolue l'élément à 50 % du haut et en définissant la marge supérieure pour décaler la hauteur de l'élément vers le haut. La moitié peut être atteinte.
②Utilisez absolu+transformLorsque la hauteur et la largeur de l'élément centré verticalement sont inconnues, vous pouvez utiliser l'attribut transform dans CSS3 pour décaler l'axe Y de 50 % afin d'obtenir la verticalité . Centré. Cependant, certains navigateurs présentent des problèmes de compatibilité.
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn