Wie stelle ich die horizontale Zentrierung in CSS ein? Zwei Möglichkeiten, die horizontale Zentrierung in CSS festzulegen

Der

CSS-Stil kann eine horizontale Zentrierung erreichen. Wie stellt man also die CSS-Horizontalzentrierung ein? In diesem Artikel erfahren Sie, wie Sie die CSS-Einstellung für die horizontale Zentrierung implementieren.

In CSS können Sie die horizontale Zentrierung von Inline-Elementen und die horizontale Zentrierung von Elementen auf Blockebene festlegen. Schüler, die Inline-Elemente und Elemente auf Blockebene nicht verstehen, können sich auf Was ist das beziehen? Definition von Elementen auf Blockebene in CSS? Was sind die CSS-Elemente auf Blockebene? Was sind die CSS-Inline-Elemente und ? Der Unterschied zwischen CSS-Elementen auf Blockebene und Inline-ElementenIn diesen beiden Artikeln schauen wir uns direkt die beiden horizontalen Zentrierungseinstellungen in CSS an.

Werfen wir zunächst einen Blick auf die CSS-Einstellung von Inline-Elementen, die horizontal zentriert werden sollen.

Der erste Typ: CSS-Inline-Elemente werden horizontal zentriert:

Syntax: div{text-align:center} /*Inline-Elemente innerhalb von DIV werden horizontal zentriert* /

Einfache Erklärung: Legen Sie den text-align:center-Stil für das übergeordnete Element fest.

<div style="text-align: center">
    <span>行内元素水平居中</span>
</div>

Ausführliche Erklärung:

1. 2e1cf0710519d5598b1f0f14c36ba674Text2e1cf0710519d5598b1f0f14c36ba674Es ist sinnlos, die beiden Wörter „Text“ horizontal relativ zur Beschriftung zu zentrieren. Die Breite von Ein Inline-Element entspricht der Breite des Inhalts, was bedeutet, dass das Wort „Text“ immer horizontal zentriert ist.

2. e388a4556c0f65e1904146cc1a846beeTexte388a4556c0f65e1904146cc1a846beeZu diesem Zeitpunkt ist es sinnvoll, die beiden Wörter „Text“ horizontal zu zentrieren, da p ein Element auf Blockebene ist und seine Breite eine Zeile einnimmt Es nimmt nur eine Breite von zwei Zeichen ein. Legen Sie zu diesem Zeitpunkt text-align:center für das p-Element fest, dann werden die beiden Wörter „text“ horizontal in einer Zeile zentriert.

3. dc6dce4a544fdca2df29d5ac0ea9906b2e1cf0710519d5598b1f0f14c36ba674Text2e1cf0710519d5598b1f0f14c36ba674dc6dce4a544fdca2df29d5ac0ea9906b, wie man das Beschriftungselement horizontal relativ zum div zentriert.

Nachdem wir die horizontale Zentrierung von CSS-Inline-Elementen gelesen haben, sprechen wir über die horizontale Zentrierung von CSS-Elementen auf Blockebene. Die horizontale Zentrierung von CSS-Elementen auf Blockebene wird in die horizontale Zentrierung unterteilt von Elementen auf Blockebene mit fester Breite und Elementen auf Blockebene mit variabler Breite werden unten separat betrachtet.

Der zweite Typ: CSS-Blockebenenelement mit fester Breite ist horizontal zentriert: Es ist sowohl ein Blockebenenelement als auch ein Element mit fester Breite.

Stellen Sie die linken und rechten Randwerte der Elemente auf Blockebene, die horizontal zentriert werden müssen, auf „Auto“ ein.

Zum Beispiel:

<div>
    <div style="width: 100px;height: 100px;background-color: green;margin: 0 auto">
    </div></div>

CSS-Blockebenenelemente mit variabler Breite sind horizontal zentriert: Elemente auf Blockebene mit variabler Breite

Zum Beispiel:

1. Fügen Sie Elemente auf Blockebene zum < hinzu ;table>-Tag.

<table style="margin: 0 auto">
    <tbody>
        <tr><td>
                <div>设置table实现水平居中</div>
    </td></tr>
    </tbody></table>

2. Legen Sie den Elementstil display:inline auf Blockebene fest und fügen Sie dann den Stil text-align:center zum übergeordneten Element hinzu.

<div style="text-align: center">
    <div style="display: inline">
        设置inline实现水平居中    
 </div></div>

3. Fügen Sie dem Element auf Blockebene ein übergeordnetes Element hinzu und setzen Sie den Stil des übergeordneten Elements auf style="float:left;position:relative;left:50%"; -level-Elementstil Für style="float:left;position:relative;left:-50%"

<div style="float:left;position:relative;left: 50%">
    <div style="position: relative;left: -50%">
        设置relative实现水平居中
    </div>
</div>

Verwandte Empfehlungen:

CSS horizontale Mittelzusammenfassung

CSS vertikale Zentrierung und horizontale Zentrierung_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonWie stelle ich die horizontale Zentrierung in CSS ein? Zwei Möglichkeiten, die horizontale Zentrierung in CSS festzulegen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!