Zentrieren Sie den Inline-Block mit CSS

1. Verwenden Sie die CSS-Eigenschaft text-align, um den Inline-Block zu zentrieren
2. Verwenden Sie die CSS-Eigenschaften justify-content und display, um den Inline-Block zu zentrieren
3. Verwenden Sie die CSS-Eigenschaften left, position und transform

In diesem Artikel werden wir mehrere HTML-Elemente erstellen und deren Anzeige auf inline-block setzen. Danach lernen wir alle Elemente mit display: inline-block zu zentrieren.

Verwenden Sie die CSS-Eigenschaft text-align, um den Inline-Block zu zentrieren

In diesem Beispiel haben wir das Element <div> mit dem Klassennamen parent erstellt. Innerhalb dieses <div>-Elements haben wir 3 weitere <div>-Elemente mit demselben Klassennamen namens child hinzugefügt.

Außerdem haben wir jedem <div>-Element mit dem Klassennamen child eine andere background-color gegeben.

Hier haben wir für jedes Element mit dem Klassennamen child den display:inline-block gesetzt. Um alle Elemente zu zentrieren, haben wir die Eigenschaft text-align: center auf das Elternelement <div> mit dem Klassennamen parent angewendet.

In der Ausgabe können Benutzer sehen, dass alle drei untergeordneten <div>-Elemente auf der Webseite zentriert sind.

HTML Quelltext:

<div class="parent">
    <div class="child" style="background-color: green">First</div>
    <div class="child" style="background-color: red">Second</div>
    <div class="child" style="background-color: blue">Third</div>
</div>

CSS-Code:

.parent {
    text-align: center;
}
.child {
    display: inline-block;
    font-size: 30px;
}

Verwenden Sie die CSS-Eigenschaften justify-content und display, um den Inline-Block zu zentrieren

Wir werden in diesem Teil die CSS-Eigenschaften justify-content und display verwenden. Wir können den Wert center für die Eigenschaft justify-content verwenden, um den gesamten Inhalt des Elements zu zentrieren.

Beispielsweise haben wir das Element <div> mit dem Klassennamen container erstellt. Danach haben wir drei <p>-Tags mit etwas Text innerhalb des <div>-Elements hinzugefügt.

Um alle Absätze in einer einzigen Zeile anzuzeigen, können wir die CSS-Eigenschaft display: flex anstelle von display:inline-block verwenden. Um alle <p>-Elemente auf einmal zu zentrieren, haben wir die justify-content: center-Eigenschaft auf die container-Klasse angewendet, die die übergeordnete Klasse aller <p>-Elemente ist.

HTML Quelltext:

<div class="container">
    <p style="background-color: green">Welcome</p>
    <p style="background-color: red">To The</p>
    <p style="background-color: blue">DelftStack</p>
</div>

CSS-Code:

.container {
    font-size: 30px;
    display: flex;
	flex-direction: row;
    justify-content: center;
}

Verwenden Sie die CSS-Eigenschaften left, position und transform

Wir werden die CSS-Eigenschaften left, position und transform verwenden, um alle Elemente mit display: inline-block zu zentrieren. Mit der Eigenschaft left können wir die linke Position des Elements festlegen.

Die Eigenschaft transformieren verschiebt das Element entsprechend unseren Anforderungen von seiner Position. Wir können die Eigenschaft position verwenden, um die Positionierungsmethode des Elements anzugeben.

Zum Beispiel haben wir ein <div> mit dem Klassennamen outer erstellt, und unser Code enthält einige <p>-Elemente mit dem Klassennamen inner. Für alle Elemente mit dem Klassennamen inner haben wir den display: inline-block verwendet, um sie inline anzuzeigen.

Wir haben left: 50% für die outer-Klasse verwendet und ihre Position auf absolute gesetzt, um das gesamte <div> in Bezug auf sein übergeordnetes Element, das das body-Element ist, zu verschieben. Danach haben wir die Eigenschaft transform: translate(-50%) verwendet, um das <div>-Element mit dem Klassennamen outer um die 50%-Breite seiner selbst in die negative x-Richtung zu verschieben.

Auf diese Weise können wir das Element <div> mit dem Klassennamen outer zentrieren.

HTML Quelltext:

<div class="outer">
    <p class="inner" style="background-color: green">ABCD</p>
    <p class="inner" style="background-color: red">EFG</p>
    <p class="inner" style="background-color: blue">HIJ</p>
</div>

CSS-Code:

.outer {
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}
.inner {
    font-size: 30px;
    display: inline-block;
}

In diesem Artikel haben wir verschiedene Methoden kennengelernt, um die Elemente mit display: inline-block zu zentrieren.