Heim > Artikel > Web-Frontend > Wissen Sie, wie man ein float:left-Element zentriert?

Wissen Sie, wie man ein float:left-Element zentriert?

yuliaOriginal: 2018-09-21 15:38:166279Durchsuche

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

Wissen Sie, wie man ein float:left-Element zentriert?

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

Wissen Sie, wie man ein float:left-Element zentriert?

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(&#39;con&#39;);
        con.style.position = &#39;relative&#39;;
        con.style.left = (document.body.offsetWidth - con.clientWidth) / 2 + &#39;px&#39;;
    </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

<body>
    <div class="box"></div>
    <script type="text/javascript" src="../js/jquery-1.12.3.js"></script>
    <script type="text/javascript">
         $(&#39;.box&#39;).css({
              &#39;position&#39; : &#39;relative&#39;,
              &#39;left&#39; : ($(window).width() - $(&#39;.box&#39;).outerWidth()) / 2 + &#39;px&#39;
          })
     </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!

JavaScript Float auto JS margin

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

Vorheriger Artikel：Teilen Sie neun reine CSS-Methoden, um eine vertikale Zentrierung zu erreichenNächster Artikel：Teilen Sie neun reine CSS-Methoden, um eine vertikale Zentrierung zu erreichen

In Verbindung stehende Artikel

Mehr sehen