Wie stelle ich die horizontale Zentrierung in CSS ein? Zwei Möglichkeiten, die horizontale Zentrierung in CSS festzulegen-CSS-Tutorial-php.cn

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>

Nach dem Login kopieren

Ausführliche Erklärung:

1. TextEs 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.

Text

Zu 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.

Text

, 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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!

Verwandte Etiketten：

css 居中水平

Quelle：php.cn

Vorheriger Artikel：Wie stelle ich den äußeren Abstand von CSS ein? So legen Sie den äußeren CSS-Abstand fest (mit Beispielen) Nächster Artikel：CSS-adaptives Layout: Wie implementiert man die CSS-Breitenanpassung?

Erklärung dieser Website

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

Neueste Artikel des Autors