将菜单文本对齐到底部

我试图将一些文本对齐到底部（用绿色边框标记），但“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

将菜单文本对齐到底部

回答

相关问题