css如何使<a>文本底部对齐？答案

【问题标题】：css how to make <a> text align bottom?css如何使<a>文本底部对齐？
【发布时间】：2011-05-09 01:22:40
【问题描述】：

如何让<a>文字底部对齐？我添加了height = line-height 和vertical-align:bottom;，但文本仍在 div 中间。怎么做？谢谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#layer{width:198px;height:48px;line-height:48px;border:1px #000 solid;vertical-align:bottom;}
#layer a{text-decoration:none;}
</style>
</head>
<body>
<div id="layer">
<a href="#">menu</a>
</div>
</body>
</html>

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

选项包括：

删除line-height: 48px并将display: table-cell添加到#layer： http://jsfiddle.net/jgQ9k/1/
请注意，这不适用于 IE7，因为不支持 display: table-cell。
使用大号line-height:http://jsfiddle.net/jgQ9k/2/

以及我实际使用的方法：

将position: relative添加到#layer，并将position:absolute; bottom:0添加到#layer a：
http://jsfiddle.net/jgQ9k/3/

【讨论】：

【解决方案2】：

height 尺寸 (48px) 等于 line-height 尺寸 (48px)。尝试增加高度大小，您会看到 css 属性工作正常，文本将位于底部

【讨论】：

【解决方案3】：

#layer {
    display: table-cell;
}

【讨论】：