Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So zentrieren Sie eine DIV-Ebene mit CSS_CSS/HTML

WBOY
Freigeben: 2016-05-16 12:11:16
Original
1649 Leute haben es durchsucht

So zentrieren Sie ein DIV
Die wichtigsten Stildefinitionen lauten wie folgt:

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto }
Beschreibung:

Definieren Sie zunächst TEXT-ALIGN: center im übergeordneten Element. Dies bedeutet, dass der Inhalt im übergeordneten Element zentriert ist. Für den IE ist diese Einstellung ausreichend. Aber es kann nicht in Mozilla zentriert werden. Die Lösung besteht darin, „MARGIN-RIGHT: auto;MARGIN-LEFT: auto;“ hinzuzufügen, wenn die Definition des untergeordneten Elements

festgelegt wird

Wenn Sie diese Methode zum Zentrieren der gesamten Seite verwenden möchten, wird empfohlen, diese nicht in ein DIV einzufügen. Sie können mehrere Divs nacheinander aufteilen, solange Sie MARGIN-RIGHT definieren jedes geteilte div. : auto;MARGIN-LEFT: auto reicht aus.

So zentrieren Sie das Bild vertikal in einem DIV
Verwenden Sie die Hintergrundmethode. Beispiel:

body{BACKGROUND: url(http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) #FFF no-repeat center;}
Der Schlüssel ist das endgültige Zentrum , Dieser Parameter definiert die Position des Bildes. Sie können auch „oben links“ (obere linke Ecke) oder „unten rechts“ usw. schreiben. Sie können auch direkt den Wert „50 30“ schreiben

Der Effekt ist wie folgt:

So zentrieren Sie den Text in einem DIV
Wenn es sich um Text handelt, können Sie die Methode zum Erhöhen des Zeilenabstands verwenden, um eine vertikale Zentrierung zu erreichen:






test content




Beschreibung:

vertikal-align:middle; bedeutet vertikale Zentrierung innerhalb der Zeile. Wir erhöhen den Zeilenabstand auf die gleiche Höhe wie die gesamte DIV-Zeilenhöhe: 200px und fügen dann den Text vertikal ein.

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!