Centering floating divs within another div

Question

I ve searched other questions and  while this problem seems similar to a couple of others  nothing I ve seen so far seems to address the issue that I m having   I have a div which contains a number of other divs  each of which is floated left  These divs each contain a photo and a caption  All I want is for the group of photos to be centered within the containing div   As you can see from the code below  I ve tried using both overflow hidden and margin x auto on the parent divs  and I ve also added a clear both  as suggested in another topic  after the photos  Nothing seems to make a difference   Thank you  I appreciate any suggestions    lt div style  position  relative  margin  0 auto  overflow  hidden  text-align  center   gt       lt h4 gt Section Header lt  h4 gt        lt div style  margin  2em auto   gt            lt div style  float  left  margin  auto 1 5em   gt               lt img src  photo1 jpg    gt  lt br   gt               Photo Caption          lt  div gt           lt div style  float  left  margin  auto 1 5em   gt               lt img src  photo2 jpg    gt  lt br   gt               Photo Caption          lt  div gt           lt div style  float  left  margin  auto 1 5em   gt               lt img src  photo3 jpg    gt  lt br   gt               Photo Caption          lt  div gt            lt div style  clear  both  height  0  overflow  hidden   gt   lt  div gt        lt  div gt    lt  div gt

User · Answer

With Flexbox you can easily horizontally (and vertically) center floated children inside a div.

So if you have simple markup like so:

<div class="wpr">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

with CSS:

.wpr
{
    width: 400px;
    height: 100px;
    background: pink;
    padding: 10px 30px;
}

.wpr span
{
    width: 50px;
    height: 50px;
    background: green;
    float: left; /* **children floated left** */
    margin: 0 5px;
}

(This is the (expected - and undesirable) RESULT)

Now add the following rules to the wrapper:

display: flex;
justify-content: center; /* align horizontal */

and the floated children get aligned center (DEMO)

Just for fun, to get vertical alignment as well just add:

align-items: center; /* align vertical */

DEMO

User · Answer

The following solution does not use inline blocks  However  it requires two helper divs    The content is floated The inner helper is floated  it stretches as much as the content  The inner helper is pushed right 50   its left aligns with center of outer helper  The content is pulled left 50   its center aligns with left of inner helper  The outer helper is set to hide the overflow    x000D   x000D   ca-outer   x000D    overflow  hidden  x000D    background   FFC  x000D    x000D   ca-inner   x000D    float  left  x000D    position  relative  x000D    left  50   x000D    background   FDD  x000D    x000D   content   x000D    float  left  x000D    position  relative  x000D    left  -50   x000D    background   080  x000D    x000D     examples    x000D  div content  gt  div   x000D    float  left  x000D    margin  10px  x000D    width  100px  x000D    height  100px  x000D    background   FFF  x000D    x000D  ul content   x000D    padding  0  x000D    list-style-type  none  x000D    x000D  ul content  gt  li   x000D    margin  10px  x000D    background   FFF  x000D    x000D   lt div class  ca-outer  gt  x000D     lt div class  ca-inner  gt  x000D       lt div class  content  gt  x000D         lt div gt Box 1 lt  div gt  x000D         lt div gt Box 2 lt  div gt  x000D         lt div gt Box 3 lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt hr gt  x000D   lt div class  ca-outer  gt  x000D     lt div class  ca-inner  gt  x000D       lt ul class  content  gt  x000D         lt li gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  lt  li gt  x000D         lt li gt Nullam efficitur nulla in libero consectetur dictum ac a sem  lt  li gt  x000D         lt li gt Suspendisse iaculis risus ut dapibus cursus  lt  li gt  x000D       lt  ul gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I accomplished the above using relative positioning and floating to the right   HTML code    lt div class  clearfix  gt                                 lt div class  outer-div  gt           lt div class  inner-div  gt               lt div class  floating-div  gt Float 1 lt  div gt               lt div class  floating-div  gt Float 2 lt  div gt               lt div class  floating-div  gt Float 3 lt  div gt           lt  div gt       lt  div gt   lt  div gt    CSS    outer-div   position  relative  float  right  right  50      inner-div   position  relative  float  right  right  -50      floating-div   float  left  border  1px solid red  margin  0 1 5em      clearfix before   clearfix after   content       display  table     clearfix after   clear  both     clearfix    zoom  1      JSFiddle  http   jsfiddle net MJ9yp   This will work in IE8 and up  but not earlier  surprise  surprise    I do not recall the source of this method unfortunately  so I cannot give credit to the original author  If anybody else knows  please post the link

User · Answer

display  inline-block  won t work in any of IE browsers  Here is what I used      change the width of  boxContainer to     1-2 pixels higher than total width of the boxes inside    boxContainer                width  800px       height  auto      text-align  center      margin-left  auto      margin-right  auto      Box      width  240px       height  90px      background-color   FFF      float  left      margin-left  10px      margin-right  10px

User · Answer

In my case  I could not get the answer by  Sampson to work for me  at best I got a single column centered on the page  In the process however  I learned how the float actually works and created this solution  At it s core the fix is very simple but hard to find as evident by this thread which has had more than 146k views at the time of this post without mention   All that is needed is to total the amount of screen space width that the desired layout will occupy then make the parent the same width and apply margin auto  That s it   The elements in the layout will dictate the width and height of the  outer  div  Take each  myFloat  or element s width or height   its borders   its margins and its paddings and add them all together  Then add the other elements together in the same fashion  This will give you the parent width  They can all be somewhat different sizes and you can do this with fewer or more elements   Ex  each element has 2 sides so border  margin and padding get multiplied x2   So an element that has a width of 10px  border 2px  margin 6px  padding 3px would look like this  10   4   12   6   32  Then add all of your element s totaled widths together   Element 1   32 Element 2   24 Element 3   32 Element 4   24   In this example the width for the  outer  div would be 112    x000D   x000D   outer   x000D       floats   margins   borders   270    x000D    max-width  270px  x000D    margin  auto  x000D    height  80px  x000D    border  1px  x000D    border-style  solid  x000D    x000D   x000D   myFloat   x000D         3 floats x 50px   150px    x000D      width  50px  x000D         6 margins x 10px   60    x000D      margin  10px  x000D         6 borders x 10px   60    x000D      border  10px solid  6B6B6B  x000D      float  left  x000D      text-align  center  x000D      height  40px  x000D    x000D   lt div class  outer  gt  x000D     lt div class  myFloat  gt Float 1 lt  div gt  x000D     lt div class  myFloat  gt Float 2 lt  div gt  x000D     lt div class  myFloat  gt Float 3 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Solution    lt  DOCTYPE HTML gt   lt html gt       lt head gt           lt title gt Knowledge is Power lt  title gt           lt script src  js jquery js  gt  lt  script gt           lt script type  text javascript  gt           lt  script gt           lt style type  text css  gt               outer                   text-align center                  width 100                   height 200px                  background red                             inner                   display inline-block                  height 200px                  background yellow                         lt  style gt       lt  head gt       lt body gt           lt div id  outer  gt               lt div id  inner  gt Hello  I am Touhid Rahman  The man in Light lt  div gt           lt  div gt       lt  body gt   lt  html gt

User · Answer

First  remove the float attribute on the inner divs   Then  put text-align  center on the main outer div  And for the inner divs   use display  inline-block  Might also be wise to give them explicit widths too      lt div style  margin  auto 1 5em  display  inline-block   gt     lt img title  Nadia Bjorlin  alt  Nadia Bjorlin  src  headshot nadia png   gt     lt br  gt    Nadia Bjorlin  lt  div gt

[html] Centering floating divs within another div

DEMO

Examples related to html

Examples related to center

Examples related to css