垂直对齐底部不起作用

Question

我需要位于<a href="#"><strong>Home</strong><span>This is a home</span></a>底部的所有文本，但是CSS代码无法正常工作。

CSS

a { text-decoration: none; color: #777; }

.menu {
    margin: 0;
    list-style: none;
}
.menu li {
    position: relative;
    display: inline-block;
}
.menu li a {
    position: relative;
    height: 100px;
    display: block;
    width: auto;
    border: 1px solid #eee;
    background: #fbfbfb;
    padding: 10px 20px;
}
.menu li a span,
.menu li a strong {
    display: block;
    border-bottom: 1px solid #bfbfbf;
    vertical-align: bottom;
}

此处的实时代码http://jsfiddle.net/wgjfL/

提前致谢

Answer 1

您需要删除position:relative; 从menu li a类中，并应用display:table-cell; 为它工作。

这是工作解决方案

编码：

.menu li a {
    background: none repeat scroll 0 0 #FBFBFB;
    border: 1px solid #EEEEEE;
    display: table-cell;
    height: 100px;
    padding: 10px 20px;
    vertical-align: bottom;
    width: auto;
}

要了解有关如何以及何时使用垂直对齐的完整逻辑 ，请参阅本文章 。

希望这可以帮助。

Answer 2

只需在主导航上执行以下操作：

清楚的

这将确保您的链接始终位于其上方任何内容的底部。

您还可以使用：

向左飘浮;

然后

清楚：无；

在其他元素上。 这将迫使他们不要环绕文本。

家伙