Heim >Web-Frontend >CSS-Tutorial >Wissen Sie, wie man ein float:left-Element zentriert?
Wissen Sie, wie man ein float:left-Element zentriert?
- yuliaOriginal
- 2018-09-21 15:38:166327Durchsuche
Floating wird häufig im Seitenlayout verwendet. Können die Elemente nach dem Floaten noch zentriert werden? In diesem Artikel geht es hauptsächlich darum, wie man ein float:left-Element zentriert. Wer es nicht weiß, lies bitte weiter. Es klingt sehr hochwertig und edel, aber eigentlich ist es ganz einfach, nachdem man es ausprobiert hat
Die erste Methode
<style type="text/css">
.box {
float: left;
width: 100px;
height: 100px;
background: lightcoral;
}
</style>
<body>
<div class="box"></div>
</body>Jetzt ist es ganz oben die Seite Links
Wir alle wissen, dass das Hinzufügen von margin: 0 auto im Fall von float keine Auswirkung hat.
Dann haben wir ein weiteres Div außerhalb des Rahmens platziert, um ihm einen Vater zu geben, sodass sein Vater in der Mitte der Seite ist
<style type="text/css">
.con {
position: relative;
float: left;
left: 50%;
background: lightblue;
}
.box {
position: relative;
float: left;
left: -50%;
width: 100px;
height: 100px;
background: lightcoral;
}
</style>
<body>
<div class="con">
<div class="box"></div>
</div>
</body>Führen Sie den Code aus und wir erhalten die folgenden Ergebnisse
Der blaue Con ist der „Vater“ der ziegelroten Box. Auf dem Bild können wir deutlich erkennen, dass der Con durch die Positionierung um 50 % nach links verschoben wurde. Die Box wird durch relative Positionierung bei -50 % des Kontrapunkts positioniert, also genau in der Mitte.
Durch die relative Positionierung untergeordneter Elemente können die untergeordneten Elemente relativ zum übergeordneten Element positioniert werden. left: -50 % liegt an der Gesamtbreite des untergeordneten Elements Element ist Die Breite des übergeordneten Elements, links: 50 %, dient dazu, den Inhalt des untergeordneten Elements relativ zum oberen linken Punkt des übergeordneten Elements um die halbe Breite des übergeordneten Elements nach links zu verschieben (rechts: 50 %). 50 % von rechts, mit dem gleichen Effekt), wodurch genau die Zentrierung des Inhalts des untergeordneten Elements erreicht wird.
Dies ist ein Zitat von jemand anderem, das es klarer machen soll.
Die zweite Methode
wird mit nativem JavaScript
<body>
<div id="con" class="box"></div>
<script type="text/javascript">
var con = document.getElementById('con');
con.style.position = 'relative';
con.style.left = (document.body.offsetWidth - con.clientWidth) / 2 + 'px';
</script>
</body> geschrieben, indem die Gesamtbreite des Bildschirms minus der Breite der Box selbst dividiert wird zwei Dann erhalten wir die Mittelposition.
Die dritte Methode
JQ
<body>
<div class="box"></div>
<script type="text/javascript" src="../js/jquery-1.12.3.js"></script>
<script type="text/javascript">
$('.box').css({
'position' : 'relative',
'left' : ($(window).width() - $('.box').outerWidth()) / 2 + 'px'
})
</script>
</body>Die Prinzipien von JS sind die gleichen~
Jetzt nur noch Drei verstehen Methoden ~ Ich hoffe, dass es in Zukunft noch mehr Methoden geben wird!
Das obige ist der detaillierte Inhalt vonWissen Sie, wie man ein float:left-Element zentriert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!