Search code examples
csshtmlpositioning

Basic HTML: place images in one row with same distance from each other

My aim is to place 3 images in one row with the same distance from each other, as it is shown in the picture below (assuming the 2 arrows have the same length).

As it should look like.

By now my solution is a very ugly one, which breaks, if the window size is too small:

<h1>
    <div style="width:105px; height:30px; float:left; margin-top:25px;">
        <img src="image1.png"/>
    </div>
    <div style="width:190px; height:30px; float:left; margin-top:25px; margin-left:30%; margin-right:30%;">
        <img src="image2.png"/>
    </div>
    <div style="width:102px; height:30px; float:right; margin-top:25px;">
        <img src="image3.png"/>
    </div>
    <div style="clear: both;">
    </div>
</h1>

I would really prefer a "clean" solution, but my HTML knowledge about positioning is too limited so far. Any help would be appreciated.

Solution

  • Use text-align: justify:

    <div class="outer">
  <img src="http://placehold.it/50x100" />
  <img src="http://placehold.it/150x100" />
  <img src="http://placehold.it/50x100" />
  <span class="fix"></span>
</div>

    .outer {
    text-align: justify;
}
.outer img {
    display: inline-block;
    vertical-align: center;
}
.outer .fix {
    width: 100%;
    height: 0;
    display: inline-block;
}

    In most browsers, you can remove that .fix span, and add:

    .outer::after {
    width: 100%;
    height: 0;
    display: inline-block;
    content: "";
}