HTML image bottom alignment inside DIV container

Question

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 the vertical-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?

score 67 · Answer 1 · edited Dec 03 '13 at 01:25

67

Set the parent div as position:relative and the inner element to position:absolute; bottom:0

edited Dec 03 '13 at 01:25

Eric Leschinski

146,994
96
417
335

answered Aug 30 '12 at 16:48

sekmo

1,517
18
27

19

This only works if you set the height of the container. – BlueSix Nov 04 '14 at 01:47

score 51 · Accepted Answer · edited May 23 '17 at 10:31

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 imgs:

http://jsfiddle.net/WSFnX/1/

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/

Daniel · Answer 3 · 2020-07-24T17:12:55.813

27

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

JSFiddle example

CSS-Tricks has a good guide for flexboxes

edited Jul 24 '20 at 17:12

answered May 04 '16 at 23:33

Daniel

8,655
5
60
87

2

I think you don't need the `flex-direction: column;` part; works well for me! – Pascal Jul 12 '16 at 11:19
Buggy support in IE11, no support for earlier IE versions, according to https://caniuse.com/#feat=flexbox – J. McNerney Mar 28 '18 at 15:01
1

Since you changed the flex-direction from the default of `row` to `column`, the `align-items` property now acts to align the children HORIZONTALLY. You should either remove `flex-direction` property from the above code OR change `align-items` to `justify-content` – Nam Kim Oct 03 '19 at 20:57
1

Somehow this answer is messed up: the once existing `flex-direction: column;` never works but had to be `flex-direction: row;` and the example on jsfiddle never includes the flex-properties but `display: table-cell`. Nevertheless this answer solved my issue, therefore up-vote. – David Jul 16 '20 at 04:27
1

Stange @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 Jul 24 '20 at 16:51
1

Also 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 as `flex-direction: row;`. – Daniel Jul 24 '20 at 17:10
1

@Daniel yes you're right `flex-direction: row;` is the default and can be omitted. – David Jul 25 '20 at 20:51

score 10 · Answer 4 · edited Jul 02 '18 at 16:28

10

<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 */
}

edited Jul 02 '18 at 16:28

Community

1
1

answered Jun 13 '16 at 09:55

Tim Kozak

4,026
39
44

This solution is regrettable very error-prone when the width of the outer container / viewport is changing. – David Jul 16 '20 at 04:29

HTML image bottom alignment inside DIV container

4 Answers4

Linked