Distributing Images Evenly & Horizontally in a Div via CSS

Distributing images evenly & horizontally in a Div via CSS

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="Sample Image"/></a>
    <a id="single_image2" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt="Sample Image"/></a>
    <a id="single_image3" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt="Sample Image"/></a>
    <span class="stretch"></span>
</div>

Trying to distribute images evenly with css

I copied the html structure starting from the div sites and pasted it on CodePen alongside with your proposed css code.
I saw that you missed the escape character between the </a> and <a>

When I added it, the code worked perfectly :)

How to equally distribute elements horizontally using CSS

Using flexbox, you can do something like this:

.parent {    display: flex;    justify-content: space-between;}
span.circle {  height: 20px;  width: 20px;  border-radius: 100%;  border: 1px solid #eee;  background:#ddd;     cursor: pointer;  transition: all 0.4s ease-in-out;}

<div class="parent">    <span id="first" class="border-change circle"></span>    <span id="second" class="circle"></span>    <span id="third" class="circle"></span>    <span id="fourth" class="circle"></span>    <span id="five" class="circle"></span>    <span id="six" class="circle"></span>    <span id="seven" class="circle"></span>    <span id="eight" class="circle"></span>    <span id="nine" class="circle"></span>    <span id="ten" class="circle"></span>    <span id="eleven" class="circle"></span></div>

row of images evenly distributed

You can remove the bottom whitespace using the following adjustments to your CSS:

#container {
  text-align: justify;
  background-color: #FF0000;
  line-height: 0;
}

#container img {
  display: inline-block;
}

#container:after {
  content: "";
  width: 100%;
  display: inline-block;
  vertical-align: bottom;
}

The generated content from the pseudo-elememt (empty string) creates an inline box that has a height equal to the line height of the containing block (#container in this example).

By setting line-height: 0, this forces any inline boxes to shrink to zero height.

Footnote

In Chrome (and similar webkit browsers), you will see some extra space to the right of the right-most element on the line. This extra space is not seen in Firefox (where I tested the code).

The extra space is the result of the white space in the original HTML mark-up. The right-most element has a white space character (CR/LF) before the closing </div> tag and this generated content is placed after the white-space, which shows up in some browsers.

You can get rid of it by modifying the HTML as follows:

<div id="container">
  <img src="http://placehold.it/150x100" />
  <img src="http://placehold.it/100x150" />
  <img src="http://placehold.it/250x50" />
  <img src="http://placehold.it/150x150" /></div>

that is, keep the closing </div> tag right next to the final img tag.

Horizontally centering/evenly distributed li inside of ul inside a div

This allows a widthless centered dynamic ul if you don't want to specify 90% width:

<!doctype html>
<div class="navbar">
    <div id="for-ie">
        <ul>
            <li><a href="Home">Home</a></li>
            <li><a href="Discounts">Discounts</a></li>
            <li><a href="Contact">Contact Us</a></li>
            <li><a href="About">About Us</a></li>
        </ul>
    </div>
</div>
<style>
.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0 auto;
    padding: 0px;
    border:1px solid red;
    display:table;
    overflow: hidden;
}
.navbar li{
    float: left;
    padding: 2px;
    width: 150px;
    margin-left: auto ;
    margin-right: auto ;
}
</style>
<!--[if IE]>
<style>
    #for-ie { text-align:center; }
    #for-ie ul { display:inline-block; }
    #for-ie ul { display:inline; }
</style>
<![endif]-->

Tested in IE6, FX 3.

EDIT: Alternate style without the extraneous element:

<!doctype html>
<div class="navbar">
    <ul>
        <li><a href="Home">Home</a></li>
        <li><a href="Discounts">Discounts</a></li>
        <li><a href="Contact">Contact Us</a></li>
        <li><a href="About">About Us</a></li>
    </ul>
</div>
<style>
.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    padding: 0px;
    zoom:1;
    border:1px solid red;
    overflow: hidden;
}
.navbar li{
    padding: 2px;
    width: 150px;
    display:inline-block;
}
</style>
<!--[if IE]>
<style>
    .navbar li { display:inline; }
</style>
<![endif]-->

CSS - Horizontally and vertically distribute divs

First you can achieve the same result in a better way by using Flexbox.

For vertical align text to the middle you can simply approach that by adding the line-height property and set it to the same exact height of the container div so in your case it would be 125px or if you used flexbox it can be done with align-items: center , and here is the final code:

.wrapper {display: -webkit-flex;display: flex;
-webkit-flex-flow: row nowrap; /* Safari 6.1+ */flex-flow: row nowrap;
-webkit-justify-content: space-between; /* Safari 6.1+ */justify-content: space-between;  font-weight: bold;
height: 125px;min-width: 612px;padding: 5px;
border: 2px dashed #444;}
.wrapper > div{display: -webkit-flex;display: flex;-webkit-flex-basis: 150px;flex-basis: 150px;justify-content: center;align-items: center;
}.aside-1, .aside-3{background: #ccc}.aside-2{background: #0ff;}

<div class="wrapper">   <div class="aside aside-1">text1</div>   <div class="aside aside-2">text2</div>   <div class="aside aside-3">text3</div></div>

How do I distribute items horizontally with CSS?

You can do what you are after using inline-block, pseudo-elements and text-align: justify;, but it will only work in IE8 and above.

Here is the code:

<!-- HTML -->

<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
</ul>


/* CSS */

ul {
    text-align: justify;
}
ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}
ul:before {
    content: '';
    display: block;
    margin-top: -1.25em;
}
li {
    display: inline-block;
    margin-right: -.25em;
    position: relative;
    top: 1.25em;
}

Live demo: http://jsfiddle.net/joshnh/UX9GU/

Distributing Images Evenly & Horizontally in a Div via CSS