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中世界最好的语言
php中世界最好的语言Original
2018-01-24 10:01:444695Durchsuche

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 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);   
}

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 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!

Stellungnahme:
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