Wie zentriert man Bilder in CSS?

CSS hilft uns bei der Steuerung der Anzeige von Bildern in Webanwendungen. Die Zentrierung von Bildern oder Texten ist eine häufige Aufgabe in CSS. Um ein Bild zu zentrieren, müssen wir den Wert von margin-left und margin-right auf auto setzen und es mit der Eigenschaft display: block; zu einem Blockelement machen.

Wenn sich das Bild in einem div-Element befindet, können wir die Eigenschaft text-align: center; verwenden, um das Bild im div-Element zentriert auszurichten.

Das <img>-Element ist ein Inline-Element, das leicht zentriert werden kann, indem man die CSS-Eigenschaft text-align: center; auf das übergeordnete Element anwendet, das es enthält.

Hinweis: Das Bild kann nicht zentriert werden, wenn die Breite auf 100% (volle Breite) eingestellt ist.
Wir können die Eigenschaft margin verwenden und sie auf auto setzen, um das Bild in der Mitte auszurichten, anstatt die Eigenschaften margin-left und margin-right zu verwenden.

Sehen wir uns an, wie man ein Bild zentriert, indem man die Eigenschaft text-align: center; auf sein übergeordnetes Element anwendet.

Beispiel

In diesem Beispiel richten wir die Bilder mit der Eigenschaft text-align: center; aus. Das Bild befindet sich in einem div-Element.

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 2px solid red;

}

img{

height: 300px;

width: 300px;

}

#center {

text-align: center;

}

</style>

</head>

<body>

<div id =„center“>

<img src=„lion.png“>

</div>

</body>

</html>