Evenly distribute images vertically within fixed-height space
You want to:
- set the div to
display:table
with a fixed height, - wrap each
<img>
in element withdisplay:table-row
anddisplay:table-cell
- set the images to
display:block
- set the table-cell elements to
vertical-align:middle
- 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
Change Justify-Content Value When Flex Items Overflow Container
CSS Filter as a Color Modifier for One Image
Wrapping Text Around a Div with CSS
Hover One Element, and Change Another (Without Using JavaScript)
How to Set the CSS Content Property with a Google Material Icon
Which CSS Selector Is Stronger
Css3 Transform Causing Text to Flicker in Safari and Firefox MAC Yosemite
Dynamically Set a CSS Property Based on a Template Value
Controller Specific Stylesheets in Rails 3: Inheritence
Center a Row Using Bootstrap 3
How to Exclude a Specific Element from Inheriting CSS Rules
Css: What's a Good Way to Create a Raised Box Effect
Difference Between Baseline of Empty and Non-Empty Inline Blocks
Bootstrap Tables Overflowing with Long Unspaced Text