将文本对齐到A元素中的底部

Question

我有一个由可点击的块组成的菜单.它的平凡ul/li/a等级由Joomla吐出.

我喜欢让完整的块可以点击并且文本垂直对齐bottom,想要两者似乎都是这里的问题.

HTML:

<div>
    <ul>
        <li><a>Klinisch onderzoek</a></li>
        <li><a>Geneesmiddel- registratie</a></li>
        <li><a>Medische hulpmiddelen</a></li>
        <li><a>Orthopedie</a></li>
        <li><a>Leesbaarheids- test</a></li>
    </ul>
</div>

CSS:

ul li {
    list-style-type: none;
    float: left;
    margin: 0 0 15px 15px;
    background-color: #BA2876;
}
ul li a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    padding: 10px;
    height: 130px;
    width: 130px;
}
ul li a:hover {
    text-decoration: underline;
}

在这里看我的小提琴

Answer 1

而不是将锚点设置为display:block,您可以将它们设置为table-cell,然后设置垂直对齐:

ul li a {
    display: table-cell;
    vertical-align:bottom;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    padding: 10px;
    height: 130px;
    width: 130px;
}

jsFiddle例子