Dieser Artikel stellt hauptsächlich die Methode zur Verwendung von CSS zum Zentrieren von schwebenden Elementen vor. Es handelt sich um das Grundwissen für das einführende Erlernen von CSS. Freunde in Not können sich auf
Methode 1
Stellen Sie den schwebenden Modus des Containers auf absolute Positionierung ein.Bestimmen Sie dann die Breite und Höhe des Containers, z. B. eine Ebene mit einer Breite von 500 und einer Höhe von 300.
Stellen Sie dann die Ränder des Containers ein Ebene
p{
width:500px;
height:300px;
margin:-150px 0 0 -250px;
position:absolute;
left:50%;
top:50%;
background-color:#000;
}Methode 2
Das übergeordnete Element und das untergeordnete Element schweben dann gleichzeitig nach links Das übergeordnete Element bewegt sich relativ dazu um 50 % nach links, und dann bewegt sich das untergeordnete Element relativ dazu um 50 % nach rechts, oder das untergeordnete Element bewegt sich relativ dazu nach links. Bewegen Sie sich einfach um -50 %.<!DOCTYPE html><html><head>
<title>Demo</title>
<meta charset="utf-8"/>
<style type="text/css">
.p{
position:relative;
left:50%;
float:left;
}
.c{
position:relative;
float:left;
rightright:50%;
}
</style></head><body>
<p class="p">
<h1 class="c">Test Float Element Center</h1>
</p>
</body>
</html>Das obige ist der detaillierte Inhalt vonEinführung in die Methode zur Verwendung von CSS zum Zentrieren schwebender Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
