Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Ausführliche Erläuterung der CSS-Elementzentrierung

高洛峰
Freigeben: 2017-03-07 14:03:06
Original
1749 Leute haben es durchsucht

Horizontal zentriert

Wenn es sich um ein Inline-Element handelt, verwenden Sie einfach text-align:center für das übergeordnete Element > Wenn es sich um ein Blockelement handelt (kein Floating), gibt es im Allgemeinen zwei Methoden, um eine horizontale Zentrierung zu erreichen: eine ist margin: 0 auto und die andere besteht darin, die Funktion calc über CSS zu berechnen 🎜> Vertikale Zentrierung

Wenn es sich um ein Inline-Element handelt, verwenden Sie im Allgemeinen line-height:{height} für das übergeordnete Element. Wenn es sich um ein Bildelement handelt, müssen Sie Vertical-Zentrierung verwenden. align on the element: middle; Darüber hinaus ist ersichtlich, dass die Elemente innerhalb des Tabellenelements td durch die Verwendung von Vertical-align:Middle und durch die Verwendung von Display:Table-Cell;Vertical vertikal zentriert werden können -align:middle; auf dem übergeordneten Element. Es ist auch möglich, Elemente vertikal zu zentrieren. Diese Methode kann sowohl für Inline-Elemente als auch für Blockelemente verwendet werden Blockelemente mit dieser Methode), dann kann die vertikale Zentrierung von Elementen durch einige Attribute wie die Position erreicht werden. Die grundlegenden Schritte sind: 1. Legen Sie die Position des übergeordneten Elements fest: relativ; %; left: 50%; 3. Legen Sie den Elementrand fest-top:-{height}/2;margin-left:-{width}/2;

Zentrierung schwebender Elemente

if Für schwebende Blockelemente (z. B. float:left) müssen Sie einige Attribute wie die Position verwenden, um die horizontale und vertikale Zentrierung des Elements zu erreichen. 1. Platzieren Sie ein p auf der äußeren Ebene des Elements und legen Sie seinen Stil fest: float:left;overflow:hidden;display:inlineblock 2. Setzen Sie das äußere p-Positionsattribut auf relativ, und die oberen und linken Werte sind; beide 50%; 3. Legen Sie den Elementstil fest: transform: Translate (-50%, -50%); Der obige Artikel über die Zentrierung von CSS-Elementen ist hoffentlich der gesamte Inhalt Es kann Ihnen eine Referenz geben, und ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Ausführlichere Erläuterungen zur CSS-Elementzentrierung und verwandte Artikel finden Sie auf der chinesischen PHP-Website!

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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!