Home » Html » How to Center Floated Divs in a Container

How to Center Floated Divs in a Container

Posted by: admin November 29, 2017 Leave a comment

Questions:

Is it possible to center floated divs in a container and if so how?

For example I have a page with a container div containing lots of variable sized (dynamically generated) floated (left) divs. The divs overflow onto the next line reguarly but they are never centered in the container div, instead alined with the left. It looks like this:

----------------------------
-                          -
- +++  +++++  ++++  ++     -
- +++  +++++  ++++  ++     -
-                          -
- ++   ++++++  +++  +      -
- ++   ++++++  +++  +      -
-                          -
----------------------------

Whereas I would like the floated divs centered in the container like this:

----------------------------
-                          -
-   +++  +++++  ++++  ++   -
-   +++  +++++  ++++  ++   -
-                          -
-   ++   ++++++  +++  +    -
-   ++   ++++++  +++  +    -
-                          -
----------------------------

Thanks,

DLiKS

Answers:

It is possible. Using http://www.pmob.co.uk/pob/centred-float.htm and http://css-discuss.incutio.com/wiki/Centering_Block_Element as a source.

Here is a fiddle demonstrating the concept, using the HTML and CSS from below: https://jsfiddle.net/t9qw8m5x/

<div id="outer">
    <ul id="inner">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2 with long text</a></li>
        <li><a href="#">Button 3</a></li>
    </ul>
</div>

This is the minimum CSS needed for the effect:

#outer {
    float: right;
    position: relative;
    left: -50%;
}

#inner {
    position: relative;
    left: 50%; 
}

#inner > li {
    float: left;
}

Explanation:

Start off with just the li { float: left; } rule. Then wrap those floats in the left: 50%; relative position, so the left edge of the <ul>‘s box is in the horizontal centre of the page, then use the rules in #outer to correctly adjust it so the centre of #inner is aligned with the page.

Questions:
Answers:

Calculate the total amount of screen space width that the desired layout will occupy then make the parent the same width and apply margin:auto.

.outer {
  /* floats + margins + borders = 270 */
  max-width: 270px;
  margin: auto;
  height: 80px;
  border: 1px;
  border-style: solid;
}

.myFloat {
    /* 3 floats x 50px = 150px */
    width: 50px;
    /* 6 margins x 10px = 60px */
    margin: 10px;
    /* 6 borders x 10px = 60px */
    border: 10px solid #6B6B6B;
    float: left;
    text-align: center;
    height: 40px;
}
<div class="outer">
  <div class="myFloat">Float 1</div>
  <div class="myFloat">Float 2</div>
  <div class="myFloat">Float 3</div>
</div>

Questions:
Answers:

A nice trick to center “div” element is to set “margin: auto”, it will center them.

Questions:
Answers:
<div id='contain'><center><div id='content'>qwerty</div></center></div>

OR

<div id='contain'><div id='content'>qwerty</div></div>

<style type='text/css'>

#content   {

  width:200px;

  height:200px;

  margin:auto;
  /* margin:auto; requires width and i think height to be defined in nearly all browsers */

  }</style>