Home > Article > Web Front-end > Do you know how to center a float:left element?

Do you know how to center a float:left element?

yuliaOriginal: 2018-09-21 15:38:166267browse

Floating is often used in page layout. Can the elements after being floated still be centered? This article mainly talks about how to center a float:left element. For those who don’t know, please continue reading. It sounds very high-end and classy, but in fact it is very simple after trying it

The first method

<style type="text/css">
    .box {
        float: left;
        width: 100px;
        height: 100px;
        background: lightcoral;
    }
</style>
<body>
    <div class="box"></div>
</body>

The current position it is in is at the top of the page Left

Do you know how to center a float:left element?

#We all know that adding margin: 0 auto; in the case of floating has no effect.

Then we put another div outside the box to give him a dad so that his dad is in the center of the page

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

When we run the code we get the following results

Do you know how to center a float:left element?

The blue con is the "father" of the brick red box. From the picture we can clearly see that the con has been moved 50% to the left through positioning. The box is positioned at -50% of con through relative positioning, which is the exact center.

Relative positioning of child elements is to position themselves relative to the parent element. float:left allows the child elements to be displayed on the same horizontal line. left:-50% is because the overall width of the child element is The width of the parent element, left:50%, is to move the content of the child element to the left relative to the upper left point of the parent element by half the width of the parent element (right:50% is 50% from the right, with the same effect), which exactly achieves the centering of the content of the child element. display effect.

This is a quote from someone else, which will make it clearer.

The second method

is written using native 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>

By getting the total width of the screen minus the width of the box itself divided by two Then you get the center position.

The third method

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

The principle is the same as JS~

Now only understanding Three methods~I hope there will be more methods in the future!

The above is the detailed content of Do you know how to center a float:left element?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript Float auto JS margin

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Share nine pure CSS methods to achieve vertical centeringNext article：Share nine pure CSS methods to achieve vertical centering

See more

Do you know how to center a float:left element?

Related articles