Do you know how to center a float:left element?-CSS Tutorial-php.cn

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

yulia

Release： 2018-09-21 15:38:16

Original

6301 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!