Heim > Artikel > Web-Frontend > So zentrieren Sie das Bild mit CSS

So zentrieren Sie das Bild mit CSS

WBOYOriginal: 2023-05-21 10:38:364394Durchsuche

Im Webdesign müssen Bilder als wichtiger Teil der Seite oft so eingestellt werden, dass sie in der Mitte angezeigt werden. In diesem Artikel wird erläutert, wie Sie das Bild mithilfe von CSS zentrieren.

Die erste Methode: Verwenden Sie das text-align-Attribut

Das text-align-Attribut gibt die horizontale Ausrichtung des Textinhalts innerhalb eines Elements an. Es wird im Allgemeinen für die Blockebene verwendet Elemente, kann aber auch für Inline-Elemente verwendet werden. Wenn das text-align-Attribut auf „center“ gesetzt ist, wird der Textinhalt innerhalb des Elements horizontal und zentriert ausgerichtet. Wenn der Textinhalt ein Bild ist, wird das Bild ebenfalls zentriert.

<!DOCTYPE html>
<html>
<head>
    <style>
        .center {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="center">
        <img src="example.jpg" alt="example image">
    </div>
</body>
</html>

Wie im obigen Code gezeigt, kann das Bild durch Verschachteln des Bildes in einem div-Element mit dem Attribut text-align:center in der Mitte angezeigt werden.

Zweite Methode: Verwenden Sie das Randattribut.

Das Randattribut wird verwendet, um die Ränder des Elements festzulegen und das Element nach außen weg von anderen Elementen oder Grenzen zu verschieben. Wenn Sie das Attribut „margin“ verwenden und dessen linken und rechten Rand auf „Auto“ setzen, wird der Inhalt des Elements automatisch zentriert.

<!DOCTYPE html>
<html>
<head>
    <style>
        .center {
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
    <img src="example.jpg" alt="example image" class="center">
</body>
</html>

Wie im obigen Code gezeigt, kann dies erreicht werden, indem man dem Bild das Klassenattribut hinzufügt, dann marginLeft und marginRight des Klassenelements im CSS-Stil auf auto setzt und die Anzeige einstellt Attribut zum Blockieren. Das Bild wird zentriert angezeigt.

Dritte Methode: Flex-Layout verwenden

Flex-Layout ist ein Flex-Box-Modell, das eine bessere Kontrolle über Elemente in einem Flex-Container ermöglicht. Flexbox steuert die Ausrichtung untergeordneter Elemente im Container über die Attribute align-items, justify-content und align-self. Wenn sowohl die Eigenschaften align-items als auch justify-content von Flex auf „center“ eingestellt sind, werden die Elemente im Container automatisch in der Mitte ausgerichtet.

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="example.jpg" alt="example image">
    </div>
</body>
</html>

Wie im obigen Code gezeigt, kann das Bild durch Hinzufügen des Flex-Layout-Attributs zu einem übergeordneten Container, der ein Bild enthält, automatisch in der Mitte ausgerichtet werden.

Zusammenfassend lässt sich sagen, dass mit den oben genannten drei Methoden problemlos eine zentrierte Anzeige von Bildern erreicht werden kann. Sie können je nach Situation die geeignete Methode auswählen, um den besten Anzeigeeffekt zu erzielen.

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie das Bild mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JavaScript-Skript-Website_So importieren Sie Daten mit ExcelNächster Artikel：JavaScript-Skript-Website_So importieren Sie Daten mit Excel

In Verbindung stehende Artikel

Mehr sehen