Question

如何使<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>

Answer 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/

Answer 2

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

Answer 3

#layer {
    display: table-cell;
}

css如何制作<a> text align bottom?</a>

3 个答案: