So zentrieren Sie Körperinhalte in CSS

So zentrieren Sie den Textinhalt in CSS: 1. Stellen Sie den Rand mit „margin“ auf „0 auto“ ein, um alle Elemente in der HTML-Seite horizontal zu zentrieren. 2. Legen Sie den Abstand zwischen dem Div und dem linken und oberen Rand des fest Seitenfenster auf „50 %“; 3. Erzielen Sie eine horizontale und vertikale Zentrierung durch jQuery.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5- und CSS3-Version, DELL G3-Computer.

Empfohlen: CSS-Video-Tutorial

Beim Entwerfen der Seite müssen wir häufig das DIV zentrieren und es horizontal und vertikal relativ zum Seitenfenster anzeigen, z. B. um das Anmeldefenster zu zentrieren. Unsere traditionelle Lösung besteht darin, reines CSS zu verwenden, um das DIV zu zentrieren. In diesem Artikel erkläre ich Ihnen, wie Sie ein DIV mithilfe von CSS und jQuery horizontal und vertikal zentrieren.

CSS macht DIV horizontal zentriert

Erklärung: Das DIV, auf das in diesem Artikel Bezug genommen wird, umfasst alle Elemente in der HTML-Seite.

Um ein DIV horizontal zu zentrieren, können Sie dies direkt mit CSS tun. Solange Sie die Breite des DIV festlegen und dann den Rand mithilfe von „Margin“ automatisch auf 0 setzen, berechnet CSS automatisch den linken und rechten Rand, um das DIV zu zentrieren.

.mydiv{   
    margin:0 auto;   
    width:300px;   
    height:200px;   
}

Aber wenn Sie das DIV vertikal zentrieren möchten, muss leider das CSS geändert werden

CSS, um eine horizontale und vertikale Zentrierung zu erreichen

Um das DIV horizontal und vertikal zu zentrieren, müssen Sie die Breite kennen und Höhe des DIV und legen Sie dann die Position fest. Für die absolute Position wird der Abstand vom linken Rand und oberen Rand des Seitenfensters auf 50 % festgelegt. Diese 50 % beziehen sich auf 50 % der Breite und Höhe der Seite Schließlich wird das DIV nach links und oben verschoben. Die Größe beträgt jeweils die Hälfte der Breite und Höhe des DIV.

.mydiv{ 
   width:300px;  
   height:200px;  
   position:absolute;  
   left:50%;  
   top:50%;  
   margin:-100px 0 0 -150px 
}

Diese Methode wird häufig verwendet, aber die Voraussetzung ist, dass die Breite und Höhe des DIV festgelegt werden müssen. Wenn beispielsweise die DIV-Breite und -Höhe der Seite dynamisch sind, muss eine DIV-Ebene angezeigt und in der Mitte angezeigt werden. Der Inhalt des DIV ist dynamisch, sodass Breite und Höhe ebenfalls dynamisch sind. jQuery kann zur Lösung des Zentrierungsproblems verwendet werden.

jQuery implementiert die horizontale und vertikale Zentrierung

Das Prinzip von jQuery, das eine horizontale und vertikale Zentrierung erreicht, besteht darin, das CSS von DIV über jQuery festzulegen und den linken und oberen Randversatz von DIV zu erhalten. Der Algorithmus für den Randversatz besteht darin, The zu verwenden Die Breite des Seitenfensters wird von der Breite des DIV abgezogen und der resultierende Wert durch 2 geteilt, was dem linken Versatz entspricht. Der Algorithmus für den rechten Versatz ist derselbe. Beachten Sie, dass die CSS-Einstellung des DIV in der resize()-Methode abgeschlossen werden muss, d. h. jedes Mal, wenn die Fenstergröße geändert wird, muss die CSS-Einstellung des DIV wie folgt ausgeführt werden:

$(window).resize(function(){ 
    $(".mydiv").css({ 
        position: "absolute", 
        left: ($(window).width() - $(".mydiv").outerWidth())/2, 
        top: ($(window).height() - $(".mydiv").outerHeight())/2 
    });        
});

Zusätzlich Wenn die Seite geladen ist, muss resize() aufgerufen werden.

$(function(){ 
    $(window).resize(); 
});

Der Vorteil dieser Methode besteht darin, dass Sie die spezifische Breite und Höhe des DIV nicht kennen müssen. Sie können jQuery direkt verwenden, um eine horizontale und vertikale Zentrierung zu erreichen, und sie ist mit verschiedenen Browsern kompatibel in vielen Popup-Ebeneneffekten.

ps: Wenn die Breite des Div größer ist als die Breite der Seite, müssen Sie dem Text ein CSS hinzufügen

<style type="TEXT/CSS">
body{width:100%; overflow:hidden}
</style>

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie Körperinhalte in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!