Heim > Web-Frontend > CSS-Tutorial > Wie zentriere ich ein Div mit CSS? So zentrieren Sie div in CSS

Wie zentriere ich ein Div mit CSS? So zentrieren Sie div in CSS

云罗郡主
Freigeben: 2018-11-21 14:02:12
Original
5021 Leute haben es durchsucht

Wie zentriert man das Div horizontal? Wie zentriere ich div? Ich glaube, dass viele Leute diese Frage haben werden. In diesem Artikel wird erklärt, wie man ein Div mit CSS zentriert. Und wie erreicht man die Zentrierung von Div.

Wenn wir im Internet surfen, werden wir feststellen, dass sich der Hauptteil der allgemeinen Website in der Mitte der Seite befindet und in der Mitte des Browsers angezeigt wird Die Bedingung stimmt mit der Browser-Zentrierungsbedingung überein.

Wenn wir die äußerste Div-Box php1 nennen, müssen wir nur den Körperstil so einstellen, dass er zentriert ist. Der Code lautet wie folgt:

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

Zu diesem Zeitpunkt müssen wir php1 festlegen box to margin:0 auto, der Code lautet wie folgt:

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

Um die Beobachtung des Effekts zu erleichtern, fügen wir php1 einen schwarzen Rand mit einer Höhe von 100 Pixel und einer Breite von 300 Pixel hinzu.

Der Code ist wie folgt:

<div id="php1">php中文网div居中效果演示</div>
Nach dem Login kopieren

Der Anzeigeeffekt ist wie folgt:

Wie zentriere ich ein Div mit CSS? So zentrieren Sie div in CSS

Im CSS-Stil, wenn wir wollen Zentrieren Sie das Div, wir müssen nur das Objekt zentrieren. Stellen Sie es auf „margin: 0 auto style“ ein, aber einige Browser verwenden standardmäßig die Zentrierung. Um mit Browsern kompatibel zu sein, können wir es mit der oben genannten Methode festlegen.

Wie zentriere ich ein Div mit CSS? Eine vollständige Einführung in die Methode zur Verwendung von CSS zum Zentrieren von Divs. Wenn Sie mehr über das CSS3-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.


Das obige ist der detaillierte Inhalt vonWie zentriere ich ein Div mit CSS? So zentrieren Sie div in CSS. 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