Question

The following html and css format arranges my images so that there are nine on each row through floating. There is, however, a large gap at the end of the each row (but presumably not large enough to fit another image, and thus the new row starts):

HTML:

<div id = "body">

<div class="img">
  <a href="">
  <img src="" width="110" height="90">
  </a>
  <div class="desc"></div>
</div>

<div class="img">
  <a href="">
  <img src="" width="110" height="90">
  </a>
  <div class="desc"></div>
</div>
</div>

//This is repeated many times so that there are 4 rows of nine images

CSS:

div.img
  {
  margin:2px;
  border: 2px solid #000000;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:8px;
  }

div.desc
  {
  text-align:center;
  font-weight:normal;
  width:120px;
  margin:5px;
  }

My first question is how do i “shift” the first image of each row so that gallery is symmetrical in the screen. My second question concerns how to ensure this formation (9×4) is the same in every browser ( on every screen width)?

At present i have been using a fixed container (in terms of pixels) to fill my own screen. Many thanks in advance.

Answer 1

Instead of using float: left, use display: inline-block on the container divs. This allows you to center the images:

#body {
  text-align: center;            
}
div.img
{
  display: inline-block;
  ....
}

http://jsfiddle.net/xzH7R/1/