Worauf sollten Sie beim Zentrieren eines Div in HTML achten?

php中世界最好的语言
Freigeben: 2017-11-23 17:18:30
Original
2316 Leute haben es durchsucht

Viele Menschen haben solche Zweifel. Wenn wir eine Webseite gestalten, befindet sich der Hauptrahmen der Webseite normalerweise in der Mitte des Browsers. Wenn Sie also eine horizontale Zentrierung des äußersten DIV erreichen möchten, müssen Sie diese unbedingt separat festlegen. Worauf sollten Sie achten, wenn Sie ein Div so einstellen, dass es zentriert ist? Lassen Sie mich es Ihnen heute vorstellen.

Wenn das CSS des äußersten DIV-Felds „#divcss5“ heißt, wird das äußerste Feld zentriert, um mit den gängigen Browsern kompatibel zu sein.

Erste Bedingung:

Zu diesem Zeitpunkt legen Sie den CSS-Inhaltszentrierungsstil (text-align:center) für „body“ fest

Das heißt, der CSS-Code:

body{text-align:center}
Nach dem Login kopieren

Erste Einstellung:

Stellen Sie zu diesem Zeitpunkt den erforderlichen CSS-Rand im Zentrierstil für „#divcss5“ ein

Das heißt, der CSS-Code:

#divcss5{margin:0 auto}
Nach dem Login kopieren

DIV-Center-Verwendungsbeispiel

Um den Layout-Zentrierungseffekt leicht zu beobachten, fügen wir „#divcss5“ einen CSS-Rahmen mit einem schwarzen Rand, einer CSS-Breite von 300 Pixel und einer Höhe von hinzu 100px.

1. Holen Sie sich endlich den CSS-Code für die DIV-Zentrierung:

body{ text-align:center} 
#divcss5{margin:0 auto;border:1px solid #000;width:300px;height:100px}
Nach dem Login kopieren

2. Entsprechender HTML-Codeausschnitt:

<div id="divcss5">DIV水平居中案例</div>
Nach dem Login kopieren

Es gibt so viele Dinge, die Sie tun müssen Achten Sie beim Zentrieren eines Div darauf, weitere spannende Inhalte zu erhalten. Beachten Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

So verwenden Sie das

-Tag von HTML

So schreiben Sie die HTML-Dokumenttypdeklaration

So zeigen Sie kreisförmige Bilder in CSS3 an

Das obige ist der detaillierte Inhalt vonWorauf sollten Sie beim Zentrieren eines Div in HTML achten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen 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