Home » Html » Distributing images evenly & horizontally in a Div via CSS

Distributing images evenly & horizontally in a Div via CSS

Posted by: admin November 29, 2017 Leave a comment

Questions:

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. So far, I’ve gotten the images to line up horizontally, but the spacing is off & everything is shifted left.

Here is my CSS:

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

My HTML:

<div id="thumbs">
  <a id="single_image" href="/dev/images/1.png">
    <img src="/dev/images/thumb1.png" alt=""/>
  </a>
  <a id="single_image" href="/dev/images/2.png">
    <img src="/dev/images/thumb2.png" alt=""/>
  </a>
  <a id="single_image" href="/dev/images/3.png">
    <img src="/dev/images/thumb3.png" alt=""/>
  </a>
</div>

Example Images

What I currently have:

enter image description here

What I’m trying to achieve:

enter image description here

Your help is much appreciated.

Answers:

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>​

Questions:
Answers:

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;
}

Questions:
Answers:

The answer is very simple, just use:

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

That’s all!

Questions:
Answers:

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;
}

Questions:
Answers:

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/

Questions:
Answers:

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.

Leave a Reply

Your email address will not be published. Required fields are marked *