Distributing images evenly & horizontally in a Div via CSS

Question

I\'m having a difficult time finding specific info for my case. I\'d like to distribute 3 image thumbnails across a 940px div in order to line up with the rest of my content

Answer 1

The answer is very simple, just use:

.container {
    display: flex;
    justify-content:space-between;
}

That's all!

Answer 2

Try add

position:relative; text-align:center;

in #thumbs, and set width and margin for (or img) within #thumbs.

Something like this, testing various values:

#thumbs a {
  width: 25%;
  margin: 0 4%;
  text-align:center;
}

Answer 3

There is an clean solution:

http://radiatingstar.com/distribute-divs-images-equaly-line

#container {
    text-align: justify;
}
#container > div {
    width: 100px; /* Declare your value. Can be in relative units. */
    display: inline-block;
    vertical-align: top;
}
#container:after {
    content: "";
    width: 100%;
    display: inline-block;
}

Answer 4

why wouldn't the wrapping id div thumbs be used as a container with a top padding of 90px, and the other internal elements use a simple class (not an id so it can be reused), that all float left. that way they horizontally align perfectly, and also the wrapping container provides the margin you are looking for. you'll also use considerably much less code to accomplish what you want.

Answer 5

The downside of text-align: justify; is this that you there must be space between each two inline-block elements, otherwise those two elements will stick to each other.

you can check this behavior here: http://jsfiddle.net/JTcGZ/1552/

The new modern way to achieve this is to use flex.

#thumbs {   
    display: flex;
    justify-content: space-between // flex-start | flex-end | center | space-around;
    align-items: stretch // flex-start | flex-end | center | baseline;
}
#thumbs a {
    display: inline-block;
}

Also you can define percentage width in modern browsers:

#thumbs a {
    width: calc((100% / 3) - 10px);
}

please visit this this page for more detail on flex layout:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 6

Use the technique shown in my answer here: Fluid width with equally spaced DIVs

Here it is with your code: http://jsfiddle.net/thirtydot/JTcGZ/

CSS:

#thumbs {   
    width: 540px;
    margin-top:90px;
    margin-left: auto; 
    margin-right: auto;

     text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
#thumbs a {
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

HTML:

<div id="thumbs">
    <a id="single_image1" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a id="single_image2" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a id="single_image3" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <span class="stretch"></span>
</div>​