Heim > Artikel > Web-Frontend > So legen Sie die horizontale und vertikale Zentrierung von HTML-Elementen fest
So legen Sie die horizontale und vertikale Zentrierung von HTML-Elementen fest
- php中世界最好的语言Original
- 2018-01-24 10:01:444720Durchsuche
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>Absolute PositionierungVerwenden 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);
}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);
}Zweiter Typ: CSS absolut Positionierung + .align-center{
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px; /*width/-2*/
margin-top: -100px; /*height/-2*/
}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);
}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);
}JQuery: .align-center{
position: absolute;
left: 50%;
top: 50%;
} Vergleich mehrerer Methoden: $(function(){
$(".align-center").css(
{
"margin-left": ($(".align-center").width()/-2),
"margin-top": ($(".align-center").height()/-2)
}
);
});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 erstellenWas sind die am häufigsten verwendeten Tags in XHTMLSo verwenden Sie das img-Bild-Tag in HTML/XHTMLDas 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!