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://jsfiddle.net/4JMav/

HTML

<ul>
    <li><a href="#">TEST 1</a></li>
    <li><a href="#">TEST 2</a></li>
    <li><a href="#">TEST 3</a></li>
    <li><a href="#">TEST 4</a></li>
    <li><a href="#">TEST 5</a></li>
    <li><a href="#">TEST 6</a></li>
    <li><a href="#">TEST 7</a></li>
</ul>

CSS

ul li
{
    display: inline-table;
    width: 100px;
    height: 100px;
    margin: 5px;
    border: 1px solid black;
}
ul li a
{
    text-align: right;
    vertical-align: bottom;
    display: block;
    height: 100%;
    padding: 10px;
}

I also tried several combinations of vertical-align and absolute positioning, also using wrappers around the a-element, with no effort yet.

Question

How can I position the link on the bottom right, while still expanding the a-element over the entire square?

回答1:

Vertical-align works only with table-cell:

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

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

回答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:

ul li {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 5px;
    border: 1px solid black;
}
ul li a {
    display: block;
    height: 100%;
    position: relative;
}
ul li a span {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

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

回答3:

Here is one way, using positioning:

ul li
{
    display: inline-table;
    position: relative;
    width: 100px;
    height: 100px;
    margin: 5px;
    border: 1px solid black;
}
ul li a
{
    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

回答4:

You need the following change:

ul li a
{
    ...
    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.

来源：https://stackoverflow.com/questions/17384875/vertical-align-of-element-not-working

标签

html

css

vertical-alignment