Wie zentriere ich ein Div horizontal in CSS?-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Wie zentriere ich ein Div horizontal in CSS?

Barbara Streisand

Dec 05, 2024 pm 10:03 PM

How to Center a Div Horizontally in CSS?

So zentrieren Sie ein Div in CSS

Versuch, ein Div mit „text-align: center;“ horizontal zu zentrieren kann sich als erfolglos erweisen. Dies liegt daran, dass „text-align: center;“ Zentriert lediglich den Inline-Inhalt des Divs, nicht das Div selbst.

Für Blockelemente wie Divs wenden Sie „margin: 0 auto;“ an. um es automatisch zu zentrieren. Wenn es sich um ein Inline-Element handelt, legen Sie „text-align: center;“ fest. stattdessen auf seinem übergeordneten Element.

"margin: 0 auto;" stellt sicher, dass der obere und untere Rand auf 0 gesetzt sind, während der linke und rechte Rand auf „auto“ (gleiche Größe) eingestellt sind, wodurch das Element zentriert wird. Beachten Sie, dass diese Technik erfordert, dass das Blockelement eine definierte Breite hat (fest oder relativ).

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein Div horizontal in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme

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

Verwandter Artikel

So viele FarblinksApr 13, 2025 am 11:36 AM

Es gab in letzter Zeit eine Reihe von Werkzeugen, Artikeln und Ressourcen über Farbe. Bitte erlauben Sie mir, ein paar Registerkarten zu schließen, indem Sie sie hier für Ihren Vergnügen zusammenrunden.

Wie automatische Margen in Flexbox funktionierenApr 13, 2025 am 11:35 AM

Robin hat dies schon einmal abgedeckt, aber ich habe in den letzten Wochen einige Verwirrung darüber gehört und gesehen, wie eine andere Person einen Stich gemacht hat, um es zu erklären, und ich wollte

Bewegliche Regenbogen unterstreichtApr 13, 2025 am 11:27 AM

Ich liebe das Design der Sandwich -Site. Unter vielen schönen Merkmalen befinden sich diese Schlagzeilen mit Regenbogenuntergründen, die sich beim Scrollen bewegen. Es ist nicht

Neues Jahr, neuer Job? Lassen Sie einen netzbetriebenen Lebenslauf machen!Apr 13, 2025 am 11:26 AM

Viele beliebte Lebenslaufdesigns machen den verfügbaren Seitenraum optimal, indem sie Abschnitte in Gitterform legen. Verwenden wir ein CSS -Netz, um ein Layout zu erstellen, das

Eine Möglichkeit, die Benutzer aus der Gewohnheit herauszubrechen, zu viel neu zu ladenApr 13, 2025 am 11:25 AM

Seiten -Nachladen sind eine Sache. Manchmal aktualisieren wir eine Seite, wenn wir der Meinung sind, dass sie nicht mehr reagiert, oder glauben, dass neue Inhalte verfügbar sind. Manchmal sind wir nur sauer auf

Domänengetriebenes Design mit ReactApr 13, 2025 am 11:22 AM

Es gibt nur sehr wenige Anleitungen zur Organisation von Front-End-Anwendungen in der Welt der Reaktionen. (Bewegen Sie einfach Dateien um, bis es sich „richtig anfühlt“, lol). Die Wahrheit

Erkennen inaktiver BenutzerApr 13, 2025 am 11:08 AM

Meistens kümmert es Sie sich nicht wirklich darum, ob ein Benutzer aktiv mit Ihrer Anwendung inaktiv oder vorübergehend inaktiv ist. Inaktiv, was vielleicht sie vielleicht