将菜单文本对齐到li元素的底部

Question

我正在尝试将一些文字对齐到li的底部（用绿色边框标记），但是 "vertical-align: bottom" 不起作用，而 "position: absolute; bottom: 0" 则会导致文字堆叠在li外面。我做错了什么？

Jsfiddle: http://jsfiddle.net/eternal_noob/dog42xeh/

HTML:

<div class="head">
<div class="logo">  <a href="/" title="Back to homepage">
    <img src="http://www.dierenasielamsterdam.nl/files/homepage/Poes-virtueel-asiel.jpg">
    </a>

</div>
<div class="nav">
    <div class="icon-top">  <span>[phone] / [phone]</span>

    </div>
    <div class="menu">
        <ul class="topmenu">
            <li><a href="a.php">Abyssinian</a>
            </li>
            <li><a href="b.php">Munchkin</a>
            </li>
            <li><a href="c.php">Persian</a>
            </li>
            <li><a href="d.php">Siamese</a>
            </li>
            <li><a href="e.php">About</a>
            </li>
        </ul>
    </div>
</div>

CSS：

.head {
    text-align: center;
    height: 150px
}
    .head:before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em
}
.logo {
    display: inline-block;
    vertical-align: middle;
    height: 100px;
    width: 350px;
}
.nav {
    display: inline-block;
    vertical-align: middle;
    height: 100px;
    width: 600px;
}
.icon-top {
    line-height:29px;
    padding-right:20px;
    color:#333;
    font-size:15px;
    text-align:right;
}
.menu {
    position: relative;
    text-align:right;
}
.menu-header {
    height:50px;
}
.topmenu {
    display: inline-block;
    height:65px;
    margin:0;
    padding:0;
    font-size: 20px;
}
.topmenu li {
    display: inline-block;
    height:100%;
    list-style:none;
    margin-left:20px;
    border: solid 1px green;
}
.topmenu li a {
    color: #000000;
    vertical-align:text-bottom;
}
.topmenu li a:hover {
    color:#b574d4;
}

- eternal_noob

---

如果你不怕 JS，这个也可以用：http://jsfiddle.net/ctwheels/dog42xeh/3/ - ctwheels

Answer 1

您可以像这样添加line-height：

.topmenu li a { 
    color: #000000;
    line-height: 110px;/*Add this*/
}

fiddle

另一种解决方案是使用table-cell：

.menu {
    position: relative;
    display: table;/*Add display table*/
    margin: 0 auto;/*Add margin 0 auto to align to the middle of the page*/
}    

.topmenu {
    display: table-row;/*Add display table-row*/
    height:65px;
    margin:0;
    padding:0;
    font-size: 20px;
}


.topmenu li {
    display: table-cell;/*Add display table-cell*/
    /*height:100%; Remove height*/
    list-style:none;
    margin-left:20px;
    border: solid 1px green;
    vertical-align: bottom;/*Add vertical-align bottom*/
}

fiddle

请看这里：理解 vertical-align 属性，或者说“如何（不）垂直居中内容”

- Alex Char

---

第一种解决方案奏效了！感谢提供另一个示例，我相信将来会有用。我更喜欢第一种方法，因为我正在对现有模板进行更改，所以改动越少越好。 - eternal_noob

Answer 2

这里有一个可能会有帮助的修复方案。

.topmenu li a {
  color: #000000;
  /* vertical-align: bottom; */
  position: relative;
  top: 46px; /* or.. top: 40px; */
}

{{链接1: fiddle}}

- Suraj