How to Center Floated Divs in a Container

Question

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

Dupe of: http://stackoverflow.com/questions/1269245/centering-floating-divs-within-another-div — mikemaccana, Jan 02 '13 at 17:30
I answered this [here](http://stackoverflow.com/a/22218210/703717) — Danield, Mar 06 '14 at 07:55

score 24 · Accepted Answer · edited Jul 03 '16 at 04:53

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.

The nature of links is they become obsolete, so please provide at least a direction in your reply, without relying on the links. — Slavic, Jul 31 '15 at 08:47
Both examples fail, if the floats break line. 2nd artikle has obsolete links. — Daniel, Apr 05 '16 at 16:00

score 0 · Answer 2 · answered Sep 05 '16 at 22:10

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>

score 0 · Answer 3 · answered Apr 12 '18 at 07:47

With CSS3 you can also achieve this with flexbox:

HTML:

<ul id="flexcontainer">
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 2 with long text</a></li>
     <li><a href="#">Item 3</a></li>
</ul>

Min CSS:

#flex-container {
    display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

#flex-container > li {
    float: left;
}

Fiddle (with some styling for visualisation): https://jsfiddle.net/k5o37dff/4/

More about flexbox: https://www.sketchingwithcss.com/samplechapter/cheatsheet.html

Browser support: https://www.w3schools.com/cssref/css3_pr_flex.asp

score 0 · Answer 4 · answered Jan 22 '21 at 14:10

just beginner

.container{
width:80% ;height:100px ; border: solid 3px goldenrod; display: flex; flex-flow: row wrap; 
float: right; position: relative; right: 10%; }

.white{width:50%;height:50% ; background-color: honeydew;}

.blue{ width:50%;height:50%; background-color: indigo;}

<!--display flex & flex-wrap properties & chess board -->


  <div class="container" >
    <div class="white"></div> <div class="blue"></div>
    <div class="blue"></div>  <div class="white"></div> 
    
  </div>

Is this an answer, a new question, or...? https://stackoverflow.com/help/how-to-answer — Zsolt Meszaros, Jan 22 '21 at 14:47

score -6 · Answer 5 · answered Jul 23 '10 at 11:46

-6

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

answered Jul 23 '10 at 11:46

Ted Gueniche

812
9
20

1

the width must be know and set – chepe263 Sep 19 '13 at 21:42

score -6 · Answer 6 · edited Apr 06 '12 at 22:14

-6

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

edited Apr 06 '12 at 22:14

Josh

8,082
5
43
41

answered Jul 24 '10 at 00:58

isildur4

321
2
2

How to Center Floated Divs in a Container

6 Answers6

Linked