Heim > Artikel > Web-Frontend > So zentrieren Sie eine DIV-Ebene mit CSS_CSS/HTML
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 wirdWenn 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
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.