CSS quatre méthodes pour réaliser un centrage vertical-tutoriel CSS-php.cn

Cet article triera quatre types de CSS pour vous permettre d'obtenir l'effet de centrage vertical. L'idée est claire et très bonne, et elle a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer

line-height Pour réaliser le centrage vertical d'une seule ligne de texte

Je pensais que le centrage vertical d'une seule ligne de texte nécessitait de régler la hauteur et la ligne height à la même valeur, mais il n'est en fait pas nécessaire de définir la hauteur. En fait, le texte lui-même apparaît centré sur une ligne. Sans définir de hauteur, la hauteur de ligne augmente la hauteur.

<style>
.test{
    line-height: 50px;
    background-color: lightblue;
}    
</style>
<p class="test">测试文字</p>

Copier après la connexion

Définissez vertical-align:middle pour obtenir un centrage vertical

【1】Définissez l'affichage de l'élément parent sur table-cell

En définissant vertical-align:middle pour l'élément table-cell , vous pouvez le faire. Tous les éléments enfants sont centrés verticalement. Ceci est similaire au centrage vertical des cellules dans les tableaux

[Remarque] Si le navigateur IE7 le prend en charge, vous pouvez le modifier en

to table-cell ne peut pas utiliser un positionnement flottant ou absolu, car le positionnement flottant ou absolu donnera à l'élément des caractéristiques d'élément de niveau bloc, perdant ainsi la fonction d'alignement vertical de l'élément table-cell.

Si un traitement de positionnement flottant ou absolu est requis, une autre couche de p doit être placée à l'extérieur.

<style>
.parent{
  display: table-cell;
  vertical-align: middle;
}
</style>
<p class="parent" style="background-color: gray;height: 100px;">
    <p class="child" style="background-color: lightblue;">我是有点长的有点长的有点长的有点长的测试文字</p>   
</p>

Copier après la connexion

CSS quatre méthodes pour réaliser un centrage vertical

[2] Si l'élément enfant est une image, définissez plutôt la hauteur de ligne de l'élément parent. de la hauteur et définissez la taille de police de l'élément parent sur 0.

alignement vertical : L'explication du milieu est que le milieu de l'élément est aligné avec la ligne de base de l'élément parent plus la moitié de la hauteur de la lettre X dans l'élément parent. Parce que le caractère X n'est pas centré verticalement dans la zone em et que les positions haute et basse du caractère X dans chaque police sont incohérentes.

Ainsi, lorsque la taille de la police est plus grande, la différence est plus évidente. Lorsque la taille de la police est 0, cela équivaut à définir la taille de la police du caractère X sur 0, ce qui permet d'obtenir un centrage vertical complet.

<style>
.parent{
  line-height: 100px;
  font-size: 0;
}
.child{
  vertical-align: middle;
}
</style>
<p class="parent" style="background-color: lightgray;width:200px;">
  <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">  
</p>

Copier après la connexion

CSS quatre méthodes pour réaliser un centrage vertical

【3】Obtenez un effet de centrage vertical en ajoutant de nouveaux éléments

Définissez la hauteur du nouvel élément sur la hauteur du parent, la largeur sur 0, et définissez également l'élément de bloc en ligne centré verticalement de vertical-align:middle. Puisque l'espace entre les deux éléments est analysé, vous devez définir font-size:0 au niveau parent, puis définir font-size sur la valeur requise au niveau enfant, si les exigences structurelles ne sont pas strictes, vous pouvez afficher ; les deux éléments sur une seule ligne, il n'est alors pas nécessaire de définir font-size:0.

<style>
.parent{
  height: 100px;
  font-size: 0;
}
.child{
  display: inline-block;
  font-size: 20px;
  vertical-align: middle;
}
.childSbling{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
</style>
<p class="parent" style="background-color: lightgray; width:200px;">
  <p class="child" style="background-color: lightblue;">我是比较长的比较长的多行文字</p>
  <i class="childSbling"></i> 
</p>

Copier après la connexion

Idée 3 : Centrage vertical par positionnement absolu

【1】Si la hauteur de l'élément enfant n'est pas fixe, utilisez top50% et translationY(-50%) pour obtenir l'effet de centrage.

Le pourcentage de la fonction de traduction est relatif à sa propre hauteur, donc top:50% combiné avec traduireY(-50%) peut obtenir l'effet de centrage.

[Note] Le navigateur IE9 ne prend pas en charge

[Note] Si la hauteur de l'élément enfant est connue, la fonction translation() peut également être remplacée par margin-top : a valeur de hauteur négative.

<style>
.parent{
  position:relative;
}
.child{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>
<p class="parent" style="background-color: lightgray; height:100px;">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

Copier après la connexion

[2] Si la hauteur de l'élément enfant est fixe, combinée avec l'attribut de modèle de boîte positionné de manière absolue, l'effet de centrage est obtenu

<style>
.parent{
  position: relative;
}
.child{
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto 0;
 height: 50px;
}
</style>
<p class="parent" style="background-color: lightgray; height:100px;">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

Copier après la connexion

En alignement horizontal au centre, placez une couche de p à l'extérieur de l'élément et définir absolu et définir une marge gauche négative sur l'élément. Ou l'attribut gauche négatif relatif peut obtenir l'effet de centrage horizontal. Mais comme la marge est relative à la largeur du bloc conteneur, margin-top:-50% obtient la largeur au lieu de -50% de la hauteur, ce n'est donc pas réalisable pour la valeur relative en pourcentage, la hauteur du bloc conteneur ; is auto Dans ce cas, les navigateurs Chrome, Safari et IE8+ ne prennent pas en charge la définition du pourcentage de valeur supérieure de l'élément, ce n'est donc pas réalisable.

Idée 4 : Utilisez le modèle de boîte flexible flex pour obtenir un centrage vertical[Remarque] Le navigateur IE9 ne prend pas en charge

【1】Définissez l'alignement de l'axe transversal sur les éléments d'alignement du conteneur évolutif : center

<style>
.parent{
  display: flex;
  align-items: center;
}
</style>
<p class="parent" style="background-color: gray; height: 100px;">
    <p class="child" style="background-color: lightblue;">测试文字</p>   
</p>

Copier après la connexion

【2】 Dans le projet évolutif Définir la marge : auto 0

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：

css centre

source：php.cn

Article précédent：Introduction à la méthode de mise en page en mode réactif utilisant calc() en CSS3 Article suivant：Explication détaillée de la façon d'implémenter une bordure de 0,5 pixel avec CSS

Déclaration de ce site Web

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

Derniers articles par auteur