Center floated child DIVs in a parent DIV that has fluid width

Question

I have the following HTML:

     
Box1
     
Box2
     

        
                      

              相关标签:
       
      

Answer 1

If your parent element doesn't have a fixed width you can't center his child elements with only CSS. I think you have to write some script that calculate the parent width, every row width and set to them the properly margin-right and margin-left.

Answer 2

You can add invisible placeholders to the end of your inline blocks. That will left-align the last row.

http://jsfiddle.net/aakt65x4/

If you don't fill up the first row, the entire thing will appear left-aligned. But I think that's what you want.

HTML:

<!--
  Centers a group of boxes that wrap to the width of its container.
  Also left-aligns them inside the container.
  Issue: Does not center group if there aren't enough boxes to fill
  the first row.
  -->
<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>

    <!--
      How many placeholders do you need?
      At least the number of blocks minus two.
      -->
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
</div>

CSS:

body {
    text-align: center;     /* center a max-width container */
    font-size: 0;           /* remove spaces between blocks */
}
.container {                /* you don't need this */
    background-color: #eee; /* so you can see what's happening */
    max-width: 960px;       /* to demonstrate the centering of a max-width container */
    display: inline-block;  /* center the max-width container */
    text-align: center;     /* center the group of blocks */
}
.block {
    display: inline-block;  /* left-align within the group */
    background-color: red;  /* so you can see what's happening */
    height: 100px;
    width: 100px;
    margin: 10px;
}
.placeholder {
    display: inline-block;  /* add to the line of blocks */
    width: 120px;           /* width + margin of a block */
}

Answer 3

Simply add margin: 0 auto; to #parent. This will center the parent div when the document width is over 1000px wide.

Answer 4

Unfortunately you are unable to do this using pure css. If you are willing to use a bit of javascript and jQuery you can easily achieve what you want:

var parent = $('#parent'),
    container = $('#container'),
    children = container.children('.child'),
    width = children.eq(0).outerWidth() + parseInt(children.eq(0).css('margin-left')) + parseInt(children.eq(0).css('margin-right')),
    maxWidth = children.length * width;

function resizeContainer() {
    var newWidth = Math.floor(parent.width() / width) * width;
    if (newWidth <= maxWidth && newWidth > 0) {
        container.width(newWidth);
    }
}

$(window).resize(resizeContainer);

resizeContainer();

Example

Answer 5

text-align works on inline elements. If I understand your problem, you should remove the float and put the boxes in display:inline-block.

Something like this : http://jsfiddle.net/6a2eqpmu/7/

#parent {
   max-width: 1500px;
   height: 500px;
   border: 1px solid #000000;
   text-align: center;
}
.child {
    width: 100px;
    height: 100px;
    border: 1px solid #000000;
    margin: 10px;
    display:inline-block; 
}

I added html comments to avoid the white-space problem, and put a max-width of 1500px in order to see the boxes centered.