Aligning images in a DIV

Question

I'm trying to align three images in a class div into a straight horizontal line.

<div class="topimages">
  <img src="code/images/image_personallogo.png" alt="personallogo">

  <img src="code/images/image_propercorn.png" alt="propercorn">

  <img src="code/images/image_christmas.png" alt="christmascard">
  </div><!--top images-->

and the CSS so far

.topimages {
  display: table;
  width: 1024px;
  margin: 40px auto;
}



.topimages img {
    width:319px;
    height:319px;
}

So the problem is that the images are almost perfectly aligned except that there is different space between the second and third image than between the first and second image. This is what I am talking about : http://postimg.org/image/y00x4nvtr/

Anyone knows what cause this and how I can fix it? Thanks.

Answer 1

The nicest way is to use a table with one tr:

HTML:

<table id="myImages">
    <tr>
        <td>
            <img src="code/images/image_christmas.png" alt="christmascard" />
        </td>
        <td>
            <img src="code/images/image_propercorn.png" alt="propercorn" />
        </td>
        <td>
            <img src="code/images/image_christmas.png" alt="christmascard" />
        </td>
    </tr>
</table>

To change margin in a table, you must use border-collapse and border-spacing

CSS:

#myImages {
    border: 1px solid silver;
    padding: 50px;
    margin: 0px auto;

    border-collapse: separate;
    border-spacing: 20px;
}

#myImages img {
    width: 320px;
    height: 320px;
}

In a table or (display: table) there is no need to set a whole width to use margin: 0 auto to center the element. The width comes from the width of the elements within. And from paddings and margins.

https://jsfiddle.net/ka827L97/