Center float boxes horizontally

Question

I want to display some floating fields (divs containing thumbnails), and the number of thumbnails depends on the current page width. For example:

<div class="container">
  <div class="box1" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
  <div class="box2" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
  <div class="box3" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
  <div class="box4" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
    .......... ETC
</div>

the problem is that for a given width, it displays, for example, 4 blocks in each row, but they are all aligned to the left, and there is some kind of empty space on the right, how can you center horizontally for each row?

Something like this: http://realworldstyle.com/thumbs_3.html , but with rectangles located horizontally on the page ...

thanks in advance,

Answer 1

, , , CSS + HTML. ( @Pekka , , )

.container margin-left: auto margin-right:auto, , .

, , :

• javascript window.resize
• ,
• div.container . div margin-left margin-right of auto

. div 100% width.

Answer 2

, - float, display: inline. , , text-align.

. , , - , inline-block .

Answer 3

:

HTML:

<ul>
    <li><img src="image1.jpg" /></li>
    <li><img src="image2.jpg" /></li>
    <li><img src="image3.jpg" /></li>
    <li><img src="image4.jpg" /></li>
</ul>

CSS

ul {
    width: 960px;
    text-align: center;
}

ul li {
    display: inline;
}

, LI. , ;) div, .

Answer 4

.container , , : .

IE6 IE7 , javascript/jquery, .

, , ; -)

Answer 5

: 0 auto; . .

<div style="width:100%; float:left; margin: 0 auto;">
   /* Your Child Elements */
</div>