Vertical-align Of Element Not Working

What I'm trying to achieve is a set of elements (boxes) with a link inside. This link should be on the bottom right, but the vertical-align property is not working jsFiddle: http:

Solution 1:

Vertical-align works only with table-cell:

ullia {
text-align: right;
vertical-align: bottom;
display: table-cell;
height: 100%;
padding: 10px;
}

JSFiddle: http://jsfiddle.net/4JMav/8/

Solution 2:

I would place the text inside a span, and then position that span absolute inside the a. Yhis would make it easy to set it to the bottom right.

Your css would look something like this:

ulli {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 5px;
    border: 1px solid black;
}
ullia {
    display: block;
    height: 100%;
    position: relative;
}
ulliaspan {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

and an example: http://jsfiddle.net/E2kfd/

Solution 3:

Here is one way, using positioning:

ulli
{
    display: inline-table;
    position: relative;
    width: 100px;
    height: 100px;
    margin: 5px;
    border: 1px solid black;
}
ullia
{
    text-align: right;
    display: inline-block;
    padding: 10px;
    position: absolute;
    bottom: 0; right: 0;
}

Personally, though, I would probably give give the ul display: inline-table and use table-cell for the li's.

jsfiddle

Solution 4:

You need the following change:

ullia
{
    ...
    display: table-cell;
    ...
}

(Demo: http://jsfiddle.net/4JMav/6/)

Vertical-align works differently for table cells and anything else: for the first, it aligns the content, for the other, it aligns the text content of the element in the line box. If you place a block into a (inline-) table, the CSS renderer generates the anonymous table cell with default vertical aligning and places the block in it. But when you convert the inner element itself into the table cell, it applies the vertical align you set.