Heim >Web-Frontend >CSS-Tutorial >Wie zentriere ich ein IMG-Bild mit CSS? Das Anzeigeattribut von CSS implementiert die Bildzentrierung (Codebeispiel).
Wie zentriere ich ein IMG-Bild mit CSS? Das Anzeigeattribut von CSS implementiert die Bildzentrierung (Codebeispiel).
- 青灯夜游Original
- 2018-10-19 11:10:4170765Durchsuche
Wenn wir die Front-End-Seite entwickeln, wird das Bild zentriert, um die Seite schön zu gestalten. Wie zentriert man das IMG-Bild mit CSS? In diesem Artikel erfahren Sie, wie Sie das IMG-Bild mit CSS zentrieren. Das Anzeigeattribut von CSS implementiert die Bildzentrierung (Codebeispiel), sodass jeder die beiden Methoden zum Festlegen des Anzeigeattributs von CSS zum Zentrieren des IMG-Bildes verstehen und beherrschen kann. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Werfen wir zunächst einen Blick auf das Anzeigeattribut und welche zwei Möglichkeiten gibt es, das Bild zu zentrieren ?
1. Verwenden Sie den Attributwert table-cell und arbeiten Sie dann mit text-align: center; und vertical-align: middle zusammen; Stellen Sie das Bild so ein, dass es zentriert wird
2. Stellen Sie display: flex; ein und verwenden Sie Elastic Layout Flex, um die Zentrierung des Bildes festzulegen Bild
Unten erfahren wir anhand einfacher Codebeispiele mehr darüber, wie diese beiden Methoden eine Bildzentrierung erreichen.
1. Verwenden Sie display:table-cell, um eine horizontale und vertikale Zentrierung von IMG-Tag-Bildern zu erreichen
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img图片居中</title>
<style>
.demo{
width: 400px;
height: 300px;
border: 1px dashed #000;
display: table-cell; /*主要是这个属性*/
vertical-align: middle;
text-align: center;
}
.demo img{
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div class="demo">
<img src="Wie zentriere ich ein IMG-Bild mit CSS? Das Anzeigeattribut von CSS implementiert die Bildzentrierung (Codebeispiel)." / alt="Wie zentriere ich ein IMG-Bild mit CSS? Das Anzeigeattribut von CSS implementiert die Bildzentrierung (Codebeispiel)." >
</div>
</body>
</html>Rendering:
Hinweis:
Die Einstellung display: table-cell; in der Demobox führt dazu, dass die Demobox als Tabellenzelle angezeigt wird (ähnlich wie
2. Flexible Layoutflexibilität
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img图片居中</title>
<style>
*{margin: 0;padding:0;}
.demo{
width: 400px;
height: 300px;
margin: 50px auto;
border: 1px dashed #000;
display: flex;
justify-content: center;
align-items: center;
}
.demo img{
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div class="demo">
<img src="Wie zentriere ich ein IMG-Bild mit CSS? Das Anzeigeattribut von CSS implementiert die Bildzentrierung (Codebeispiel)." / alt="Wie zentriere ich ein IMG-Bild mit CSS? Das Anzeigeattribut von CSS implementiert die Bildzentrierung (Codebeispiel)." >
</div>
</body>
</html>Rendering:
Anleitung:
Festlegen display: flex; um ein flexibles elastisches Layout zu implementieren, stellen Sie justify-content: center ein, um das Bild horizontal und zentriert auszurichten, und stellen Sie align-items: center ein, um das Bild vertikal und zentriert auszurichten.
Zusammenfassung: Das Obige ist eine vollständige Einführung in die beiden Methoden zur Verwendung des Anzeigeattributs von CSS zum Zentrieren von Bildern. Ich hoffe, dass es für das Lernen aller hilfreich ist. Weitere verwandte Tutorials finden Sie unter CSS3-Video-Tutorial , Html5-Video-Tutorial , Bootstrap-Video-Tutorial !
Das obige ist der detaillierte Inhalt vonWie zentriere ich ein IMG-Bild mit CSS? Das Anzeigeattribut von CSS implementiert die Bildzentrierung (Codebeispiel).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!