title: How to center and justify images horizontally inside a `<div>` element?
body: <p>I've got a <code>&lt;div&gt;</code> box, inside are one ore more images.</p>
  
  <p>Those images should be horizontally centered, and the distance between two or more images should always be equal. So, when there's just one image, left and right spaces should be equal, when there's more than one, all spaces between the images, and the borders of the <code>&lt;div&gt;</code> element should be equal.</p>
  
  <p>This is the CSS code for the <code>&lt;div&gt;</code> element:</p>
  
  <pre><code>div.bild {
      text-align:center;
      position:absolute;
      bottom: 0;
      margin-left: -30px;
      margin-bottom: 30px;
      width: 100%;
  }
  </code></pre>
  
  <p>And this is the CSS for he <code>&lt;img&gt;</code> tags:</p>
  
  <pre><code>img {
      margin: auto;
  }
  </code></pre>
  
  <p>And this is the relevant HTML excerpt:</p>
  
  <pre><code>&lt;div id="box1" class="box"&gt;
      &lt;h2&gt;&lt;a name="box1"&gt;(title)&lt;/a&gt;&lt;/h2&gt;
      &lt;p&gt;(text)&lt;/p&gt;
      &lt;div class="bild"&gt;
          &lt;img id="imgleft" src="images/Comic-1.png"/&gt;
          &lt;img id="imgright" src="images/Comic-2.png"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>