將菜單文本對齊到底部

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

來源

2014-08-28 eternal_noob

如果你不怕JS的這也適用：http://jsfiddle.net/ctwheels/dog42xeh/3/ – ctwheels 2014-08-28 18:04:56

您可以添加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"

來源

2014-08-28 18:04:06

增加了正確小提琴在第二個解決方案。 – 2014-08-28 18:11:44

第一個解決方案做到了！感謝另一個例子，我相信它將在未來有用。我更喜歡第一個，因爲我正在對現有模板進行更改，所以越少越好。 – 2014-08-29 01:30:06

這裏有一個修復可能會有所幫助。

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

fiddle

來源

2014-08-28 18:20:22

將菜單文本對齊到底部

回答

相關問題