將菜單文本對齊到底部

Question

我試圖將一些文本對齊到底部（用綠色邊框標記），但「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