Centering content of div with display: table-cell used to bottom align

Question

I'm trying to create a centered div with the content of that div (a few images) bottom aligned. Bottom aligning the content is already a tricky issue that I've resolved (using HTML image bottom alignment inside DIV container). However, the solution removed the centering of the div.

The way I was centering was using display: inline-block;
Original, before bottom aligning content:
http://jsfiddle.net/5NuBD/

The fix to bottom align was adding display: table-cell;vertical-align: bottom;
New, with bottom aligned content, which is no longer centered:
http://jsfiddle.net/KurpZ/

I'm looking for a centered div that is also bottom aligned. It seems these two solutions are incompatible.

I misunderstood your question and thought you wanted to vertically center the container of your images (images still being at the bottom of this container) inside `#wrapper` so my answer with http://jsfiddle.net/KurpZ/1/ is void. — FelipeAls, Feb 22 '13 at 19:45

score 1 · Answer 1 · answered Feb 22 '13 at 19:31

1

If the div can be a fixed width :

#wrapper {
    text-align:center;
    margin: 0 auto;
    width: 230px;
}

answered Feb 22 '13 at 19:31

Chris Lee Faavesi

40
5

That's frustrating. I need the width to be dynamic. – Jeff Lamb Feb 22 '13 at 19:38

score 1 · Accepted Answer · answered Feb 22 '13 at 20:54

1

I ended up setting the css to a fixed width, as suggested by Chris. I then used jquery to sum the widths of each image and manually set the .width() after the page loaded. This works.

answered Feb 22 '13 at 20:54

Jeff Lamb

5,755
4
37
54

Centering content of div with display: table-cell used to bottom align

2 Answers2