Question

I’m working on designing up a table with 7 images in it that are all roughly the same size. Basically, I was wondering if there is a way (other then splitting each row into a different table) to change the HTML tendency to put everything in columns, and force it to lay it out based on rows.

Here is a jsfiddle of what it is. (I used Lorem Ipsum instead of the images) I would like the top and bottom row centered.

I know I can do this if I was to split it into three tables and set each one to have a width:xxxpx and margin: 0 auto, but would rather not do that.

Any suggestions are appreciated.

Answer 1

Yeah, it might be better to go with multiple divs for this issue. Is it possible to do something like the following:

HTML:

<div class="rows">
   <div class="top">
       <img></img>
       <img></img>
   </div>
   <div class="middle">
       <img></img> 
       <img></img>
       <img></img>
   </div>
   <div class="bottom">
       <img></img>
       <img></img>
   </div>
<div>

CSS:

.rows{
  margin:10px;
}

.top, .bottom{
  padding-left:85px;
  padding-right:85px;
}

.top, .bottom, .middle
{
  width:520px;
}

.rows img
{
  margin: 10px;
  width:150px;
}

Basically, let the normal flow of images control their positioning, and instead use margins and padding to equalize the spacing.