HTML image bottom alignment inside DIV container
Solution 1
This is your code: http://jsfiddle.net/WSFnX/
Using display: table-cell
is fine, provided that you're aware that it won't work in IE6/7. Other than that, it's safe: Is there a disadvantage of using `display:table-cell`on divs?
To fix the space at the bottom, add vertical-align: bottom
to the actual img
s:
Removing the space between the images boils down to this: bikeshedding CSS3 property alternative?
So, here's a demo with the whitespace removed in your HTML: http://jsfiddle.net/WSFnX/4/
Solution 2
Set the parent div as position:relative
and the inner element to position:absolute; bottom:0
Solution 3
Flexboxes can accomplish this by using align-items: flex-end;
with display: flex;
or display: inline-flex;
div#imageContainer {
height: 160px;
align-items: flex-end;
display: flex;
/* This is the default value, so you only need to explicitly set it if it's already being set to something else elsewhere. */
/*flex-direction: row;*/
}
CSS-Tricks has a good guide for flexboxes
Solution 4
<div>
with some proportions
div {
position: relative;
width: 100%;
height: 100%;
}
<img>
's with their own proportions
img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: auto; /* to keep proportions */
height: auto; /* to keep proportions */
max-width: 100%; /* not to stand out from div */
max-height: 100%; /* not to stand out from div */
margin: auto auto 0; /* position to bottom and center */
}
Patric
Please have a look at http://qoo.li I am a software engineer working in Switzerland.
Updated on July 25, 2020Comments
-
Patric almost 4 years
I have a div tag with a fixed height. Most of the images have the same height and width.
I want to align the images at the bottom of the div so that they are nicely arranged. Here is what I have so far:
<div id="randomContainer"> <div id="imageContainer"> <img src="1.png" alt=""/> <img src="2.png" alt=""/> <img src="3.png" alt=""/> <img src="4.png" alt=""/> </div> <div id="navigationContainer"> <!-- navigation stuff --> </div> </div>
The CSS looks like:
div#imageContainer { height: 160px; vertical-align: bottom; display: table-cell; }
I managed to align the images at the bottom with
display: table-cell
and thevertical-align: bottom
css attributes.Is there a cleaner way as displaying the div as table-cell and aligning the images at the bottom of the DIV tag?
-
BlueSix over 9 yearsThis only works if you set the height of the container.
-
Pascal almost 8 yearsI think you don't need the
flex-direction: column;
part; works well for me! -
J. McNerney about 6 yearsBuggy support in IE11, no support for earlier IE versions, according to caniuse.com/#feat=flexbox
-
Nam Kim over 4 yearsSince you changed the flex-direction from the default of
row
tocolumn
, thealign-items
property now acts to align the children HORIZONTALLY. You should either removeflex-direction
property from the above code OR changealign-items
tojustify-content
-
David almost 4 yearsSomehow this answer is messed up: the once existing
flex-direction: column;
never works but had to beflex-direction: row;
and the example on jsfiddle never includes the flex-properties butdisplay: table-cell
. Nevertheless this answer solved my issue, therefore up-vote. -
David almost 4 yearsThis solution is regrettable very error-prone when the width of the outer container / viewport is changing.
-
Daniel almost 4 yearsStange @David, thanks for pointing that out. Looks like JSFiddle forgot my actual fiddle, then someone clicked on the link and created another fiddle overwriting mine? I'll update the JSFiddle.
-
Daniel almost 4 yearsAlso note @David,
flex-direction: row;
is the default value, so unless some other css sets it, you can leave it blank and it'll behave asflex-direction: row;
. -
David almost 4 years@Daniel yes you're right
flex-direction: row;
is the default and can be omitted.