So legen Sie die horizontale und vertikale Zentrierung von HTML-Elementen fest-HTML-Tutorial-php.cn

So legen Sie die horizontale und vertikale Zentrierung von HTML-Elementen fest

php中世界最好的语言

Freigeben： 2018-01-24 10:01:44

Original

4756 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie die horizontale und vertikale Zentrierung von HTML-Elementen einstellen ein Blick. Wenn wir eine Seite entwerfen, müssen wir das DIV häufig horizontal und vertikal relativ zum Seitenfenster zentrieren, beispielsweise das Anmeldefenster.

Bisher wurden viele Methoden erforscht.

HTML:

Der erste Typ: CSS

<body>  
    <div class="maxbox">  
        <div class="minbox align-center"></div>  
    </div>  
</body>

Nach dem Login kopieren

Absolute Positionierung

Verwenden Sie hauptsächlich die absolute Positionierung und verwenden Sie dann den Rand, um sich an die Mitte anzupassen Position.

Übergeordnetes Element:

Untergeordnetes Element:

.maxbox{   
    position: relative;   
    width: 500px;   
    height: 500px;   
    margin: 5px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

Nach dem Login kopieren

Horizontale und vertikale Mittelausrichtung:

.minbox{   
    width: 200px;   
    height: 200px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

Nach dem Login kopieren

Zweiter Typ: CSS absolut Positionierung +

.align-center{   
    position: absolute;   
    left: 50%;   
    top: 50%;   
    margin-left: -100px;   /*width/-2*/  
    margin-top: -100px;    /*height/-2*/  
}

Nach dem Login kopieren

Javascript

/JQuery verwendet hauptsächlich die absolute Positionierung und verwendet dann Javascript/JQuery, um sich an die mittlere Position anzupassen. Im Vergleich zur ersten Methode verbessert diese Methode die Flexibilität der Klasse.

Übergeordnetes Element:

Untergeordnetes Element:

.maxbox{   
    position: relative;   
    width: 500px;   
    height: 500px;   
    margin: 5px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

Nach dem Login kopieren

Horizontale und vertikale Mittelausrichtung:

.minbox{   
    width: 200px;   
    height: 200px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

Nach dem Login kopieren

JQuery:

.align-center{   
    position: absolute;   
    left: 50%;   
    top: 50%;   
}

Nach dem Login kopieren

Vergleich mehrerer Methoden:

$(function(){   
    $(".align-center").css(   
        {   
            "margin-left": ($(".align-center").width()/-2),   
            "margin-top": ($(".align-center").height()/-2)   
        }   
    );   
});

Nach dem Login kopieren

Die erste absolute CSS-Positionierungsmargenanpassung weist eine gute Kompatibilität auf, es mangelt ihr jedoch an Flexibilität. Wenn es viele Felder gibt, die horizontal und vertikal zentriert werden müssen, müssen sie aufgrund ihrer unterschiedlichen Breite und Höhe unterschiedlich .align-center geschrieben werden.

Der zweite verwendet eine Skriptsprache, die gut kompatibel ist und die Mängel des ersten ausgleicht. Der Effekt der horizontalen und vertikalen Zentrierung wird durch Änderungen in Breite und Höhe nicht beeinflusst.

Der dritte nutzt einige neue Eigenschaften von CSS3 und ist mit IE10, Chrome, Firefox und Opera kompatibel. Die Kompatibilität ist nicht sehr gut und der horizontale und vertikale Zentrierungseffekt wird durch Änderungen in Breite und Höhe nicht beeinträchtigt.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Wie man HTML und CSS verwendet, um klaren Text zu erstellen

Was sind die am häufigsten verwendeten Tags in XHTML

So verwenden Sie das img-Bild-Tag in HTML/XHTML

Das obige ist der detaillierte Inhalt vonSo legen Sie die horizontale und vertikale Zentrierung von HTML-Elementen fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!