Wie zentriere ich Bilder und Text in CSS vertikal? Welche Methoden gibt es?

Wenn wir arbeiten, verwenden wir häufig Bilder und Text für das Layout. Aufmerksame Freunde werden jedoch feststellen, dass HTML standardmäßig Bilder oben und Text unten ausrichtet kann nicht zentriert werden. Um die Seite schön zu gestalten, sind wir es gewohnt, die Ausrichtung von Bildern und Text festzulegen. Wie stellen wir also die vertikale Zentrierung von Text und Bildern in CSS ein? Wie kann ich Text und Bilder vertikal zentrieren?

Methode 1: Eine einfache und grobe Möglichkeit, direkt das CSS-Attribut „vertikal-align: middle“ zu verwenden. Der Code lautet wie folgt:

<img  src="/static/imghwm/default1.png"  data-src="img/second_logo.png"  class="lazy"     style="max-width:90%"/ alt="Wie zentriere ich Bilder und Text in CSS vertikal? Welche Methoden gibt es?" ><a href="#">哈哈哈</a>

Rendering:

Methode 2: Wenn das Bild über ein Hintergrundbild hinzugefügt wird, können Sie Hintergrund- und Zeilenhöhe=Höhe-Einstellungen verwenden, um eine vertikale Ausrichtung in der Mitte zu erreichen des Textes und des Bildes. Der Code lautet wie folgt:

HTML-Teil:

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

CSS-Teil:

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

Rendering:

Methode 3: Wenn das Bild und der Text in zwei verschiedenen Divs platziert sind, können wir sie über display: inline-block und Vertical-align: middle festlegen, um das Bild und den Text vertikal zu zentrieren. Der Code lautet wie folgt:

HTML-Teil:

<div>
    <div class="aa"><img  src="/static/imghwm/default1.png"  data-src="img/pic1.png"  class="lazy"   alt="Wie zentriere ich Bilder und Text in CSS vertikal? Welche Methoden gibt es?" ></div>
    <div class="bb"><a href="">啦啦啦</a></div>
</div>

CSS-Teil:

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

Rendering:

Zusammenfassung: Das Obige stellt die verschiedenen Methoden zum vertikalen Zentrieren von Bildern und Text vor. Sie sollten die für Sie geeignete Methode auswählen.

Das obige ist der detaillierte Inhalt vonWie zentriere ich Bilder und Text in CSS vertikal? Welche Methoden gibt es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!