Evenly Distribute Images Vertically Within Fixed-Height Space

Evenly distribute images vertically within fixed-height space

You want to:

  1. set the div to display:table with a fixed height,
  2. wrap each <img> in element with display:table-row and display:table-cell
  3. set the images to display:block
  4. set the table-cell elements to vertical-align:middle
  5. set the height of the first and last rows to be exactly as tall as the images themselves

This will cause the space to be evenly distributed vertically.

Demo: http://jsfiddle.net/X2URZ/2/

Code:

<ul id="img-list">
<li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
<li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
<li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
</ul>​
#img-list { display:table; height:100px }
#img-list img { height:20px; display:block }
#img-list li { display:table-row }
#img-list li span { display:table-cell; vertical-align:middle; background:red }
#img-list li:first-child,
#img-list li:last-child { height:20px }​

CSS: space li so they are evenly distributed vertically in a div of fixed height

I hope you don't have li's as direct children of a div, this would not be valid HTML.

To evenly distribute li's inside a ul, you could set the ul to display: table and the li's to display: table-row:

ul {
height: 300px;
display: table;
}
li {
display: table-row;
}
li:before {
content:'•';
float: left;
width: 20px;
font-size: 1.8em;
line-height: 0.75em;
}

Here's a jsFiddle

If you have a div wrapping the ul, and you want the li's to be evenly spaced vertically inside this div, all you'd need to change is setting the fixed height on the div instead, and setting the ul's height to 100%.

Edit

I realised the solution didn't play well in any version of IE, this updated version fixes that by rendering the bullet point inside the pseudo element, and it then set the font-size, line-height and width on the pseudo element to get it to look good and line things up, it works in IE8+ and all other browsers.

CSS top-and-bottom padding: split evenly within fixed-height border

Middle align in CSS is unnecessarily elusive.

One option is adding this to your wrapper:

vertical-align:middle;    
display:table-cell;

Here is a JSFiddle example

Evenly space list items vertically

You can do this with Flexbox and justify-content: space-around;

Flex items are evenly distributed so that the space between two adjacent items is the same. The empty space before the first and after the last items equals half of the space between two adjacent items.

.container {  border: 1px solid black;  height: 500px;  width: 400px;  padding: 10px;  box-sizing: border-box;}
.spaced { height: 100%; padding: 0; list-style: none; display: flex; flex-direction: column; justify-content: space-around; margin: 0;}.spaced li { border: 1px solid blue; height: 60px;}
<div class="container">  <ul class="spaced">    <li>item </li>    <li>item </li>    <li>item </li>    <li>item </li>  </ul></div>

Need to keep image (horizontal / vertical) in a fixed height div

First off, the markup is over complicated for what you want and line 15 and 45 are applying bootstrap classes .col-md-12 and .row on the same element which is in incorrect. Bootstrap class .col-xx-nn must be assigned to a child element with a bootstrap class .row.

Getting back on track to what you want. I have simplified the HTML code to get your desired result, I think. Check it out and let me know what isn't right and I will change it and explain why.

https://jsfiddle.net/6y4uf16y/84/

What I did was create a container div around the sale image that uses the CSS flex box. This div will take up any remaining space. Therefore, if you change the height of your .items element. The flexbox container will adapt and the sale image will respond appropriately to the new size. There is no fixed heights here except for the one that was placed on the .items class of 260px which I believe is what you wanted.

The reason for this is that the bootstrap class .img-reponsive needs a height and/or width attribute to be responsive. Therefore, I have set the height and width equal to the flex box container around it. You can change the width value or .img-sale back to 30% if you wish.

Moreover, as a bonus, I have aligned the button to always be in the bottom right corner as I think you wanted it.

If this answer solves your problem, don't forget to mark it as the correct solution.

Cheers

Edit Sorry wrong JSFiddle link, correct link has been added. I also added proof that it is dynamic with multiple rows of text in the h4 and h5 elements.

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

Why is the img tag screwing up the vertical alignment from line-height?

You need to add vertical-align: middle to your img tag, because it's not inline element, its inline-block element.

See updated Fiddle

Note that your vertical alignment method will not work when your text will be more than 1 row. Use for alignments flexbox, there are really good things :)

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.



Related Topics



Leave a reply



Submit