Comment centrer verticalement des images et du texte en CSS ? Quelles sont les méthodes ?

Lorsque nous travaillons, nous utilisons souvent des images et du texte pour la mise en page, mais les amis prudents constateront que par défaut, HTML aligne les images en haut et le texte en bas, donc lorsque l'image est haute et le texte est bas, il ne peut pas être centré. Afin de rendre la page belle, nous avons l'habitude de définir l'alignement des images et du texte Alors comment définir le centrage vertical du texte et des images en CSS ? Quels sont les moyens de centrer verticalement le texte et les images ?

Méthode 1 : Une manière simple et grossière, utilisez directement l'attribut CSS vertical-align: middle, le code est le suivant :

<img  src="/static/imghwm/default1.png"  data-src="img/second_logo.png"  class="lazy"     style="max-width:90%"/ alt="Comment centrer verticalement des images et du texte en CSS ? Quelles sont les méthodes ?" ><a href="#">哈哈哈</a>

Rendu :

Méthode 2 : Si l'image est ajoutée via une image d'arrière-plan, vous pouvez utiliser les paramètres background, line-height=height pour obtenir un rendu vertical centrage du texte et de l'image Alignement. Le code est le suivant :

Partie HTML :

<div class="aa">
   <a href="">哎呦呦</a>
</div>

Partie CSS :

.aa{
       width: 200px;
       height: 100px;
       line-height: 100px;          
       background: url(img/pic4.png) no-repeat left center;          
      }
.aa a{padding-left: 80px;}

Rendu :

Méthode 3 :Si l'image et le texte sont placés dans deux divs différents, nous pouvons les définir via display : inline-block et vertical-align : middle pour centrer l'image et le texte verticalement Le code. se présente comme suit :

Partie HTML :

<div>
    <div class="aa"><img  src="/static/imghwm/default1.png"  data-src="img/pic1.png"  class="lazy"   alt="Comment centrer verticalement des images et du texte en CSS ? Quelles sont les méthodes ?" ></div>
    <div class="bb"><a href="">啦啦啦</a></div>
</div>

Partie CSS :

.aa{
    display: inline-block;
    vertical-align: middle;
    }
 .bb{
     display: inline-block;
     }

Rendu :

Résumé : ce qui précède présente différentes manières de centrer verticalement des images et du texte. Différentes mises en page utilisent différentes méthodes. Vous devez choisir la méthode qui vous convient lorsque vous l'utilisez.

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!