Quelles sont les méthodes pour centrer verticalement le texte div ? Introduction à la méthode de centrage vertical du texte div

Le centrage vertical est une méthode de centrage très courante dans la mise en page frontale. L'article suivant vous présentera la méthode de mise en œuvre du centrage vertical du texte div. Les amis dans le besoin peuvent s'y référer.

Tout d'abord, nous devons savoir que le centrage horizontal du texte est relativement simple. Les éléments au niveau des lignes définissent le centre d'alignement du texte de leurs éléments parents, et les éléments au niveau des blocs définissent leurs propres marges gauche et droite. auto. Mais le centrage vertical du texte div n’est pas si simple, examinons donc de plus près plusieurs méthodes de mise en œuvre du centrage vertical du texte div.

1. L'attribut vertical-align centre le texte

Il existe de nombreuses valeurs d'alignement vertical. Les valeurs couramment utilisées sont middle, bottom, text-bottom. etc. Cependant, l'utilisation réelle Parfois, nous constaterons que cet attribut "fonctionne parfois mais parfois ne fonctionne pas". Dans certains cas, après avoir ajouté cet attribut, nous ne voyons toujours aucun changement dans l'image ou le texte. En effet, l'alignement vertical ne fonctionne qu'au sein d'éléments tels que inline-block ou inline, ainsi que table-cell.

Exemple :

<div style="vertical-align: middle;display: table-cell;">
    <img src="02.jpg" alt="">
    <p>文本居中</p></div>

2. Utilisez la hauteur de ligne pour centrer le texte verticalement

S'il n'y a qu'une seule ligne à centrer verticalement. ou quelques mots, alors c'est le plus simple à réaliser, il suffit de faire en sorte que la hauteur de ligne du texte soit la même que la hauteur du conteneur.

Exemple :

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

3. Utilisez le remplissage pour centrer le texte verticalement

Utilisez le remplissage Utilisation des marges pour centrer verticalement Centrer le texte est similaire à l'utilisation de la hauteur de ligne pour centrer verticalement le texte. Il convient également pour centrer verticalement une ou plusieurs lignes de texte.

Exemple :

p { padding:20px 0; }

4. Utilisez la transformation CSS3 pour centrer verticalement le texte

Exemple :

.center-vertical{
  position: relative;
  top:50%;
  transform:translateY(-50%);
}.center-horizontal{
  position: relative;
  left:50%;
  transform:translateX(-50%); 
}

5. Utilisez la disposition flexible pour centrer verticalement le texte

Exemple :

.flex{    /*flex 布局*/
    display: flex;    /*实现垂直居中*/
    align-items: center;    /*实现水平居中*/
    justify-content: center;
    
    text-align: justify;
    width:200px;
    height:200px;
    background: #000;
    margin:0 auto;
    color:#fff;
}

Cet article se termine ici, j'aimerais en savoir plus sur ce qui précède. divers attributs utilisés dans le code, vous pouvez vous référer au manuel d'utilisation css et au manuel d'étude css3 sur le site PHP chinois ! ! !

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!