Bottom align logos and top align titles

Question

I'm trying to achieve a layout for a grid of logos where the logos are bottom aligned to a common baseline and the titles, below the logos, are top aligned. Both are centrally aligned horizontally.

I can achieve this easily using tables, but semantically, I think that I'd prefer to use divs. FYI, I'm using the Bootstrap framework.

I've tried all kinds of CSS combinations, but I was always running into conflicts with display and position attributes.

I'm sure that there are JavaScript solutions too, which I want to use only as a last resort.

Can anyone think of a way to do this in CSS without using tables or JS?

Answer 1

div{
    display: inline-table;
    max-width: 200px;
    text-align: center;
}
div img{
  display: table-row;
}
div h3{
  display: table-row;
}

See the updated fiddle : http://jsfiddle.net/xtj3y/3/

Answer 2

I changed every tr, td and table element to a div and added a class "table" to the outer div. After that I used the following css:

.table {
    display: table;
}

.table > div {
    display: table-row;
}

.table > div > div {
    width:33%;
    display: table-cell;
    text-align:center;
}
.logos div {
    vertical-align:bottom;
}
.titles td {
    vertical-align:top;
}

That will look like this: http://jsfiddle.net/xtj3y/4/

EDIT:

Sorry, didn't see your question on time. I made a change. The downside is that you have to use absolute heights, instead of variable heights.

see: http://jsfiddle.net/xtj3y/18/