Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

不言
Freigeben: 2018-09-10 13:59:55
Original
7377 Leute haben es durchsucht

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.

2.

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.

3.

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage