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 jsfiddle.net/KurpZ/1 is void. — FelipeAls
– FelipeAls, Commented Feb 22, 2013 at 19:45

Chris Lee Faavesi · Accepted Answer · 2013-02-22 19:31:17Z

1

If the div can be a fixed width :

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

answered Feb 22, 2013 at 19:31

Chris Lee Faavesi

405 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeff Lamb Over a year ago

That's frustrating. I need the width to be dynamic.

Jeff Lamb · Accepted Answer · 2013-02-22 20:54:51Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related