Question

我正在尝试将一些文本对齐li的底部（标有绿色边框），但“vertical-align：bottom”不起作用，“position：absolute; bottom：0”导致文本堆积在外面李。我做错了什么？

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>(999)999-9999 / (999)999-9999</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;
}

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

看看这里：Understanding vertical-align, or "How (Not) To Vertically Center Content"

Answer 2

这是一个可能有用的修复方法。

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

fiddle

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

2 个答案: