css как заставить <a>выравнивать текст снизу? - PullRequest
Новая
       0

css как заставить <a>выравнивать текст снизу?

2 голосов
/ 08 мая 2011

Как сделать так, чтобы <a> выравнивал текст по низу? Я добавил height = line-height и vertical-align:bottom;, но текст все еще в середине div. Как сделать? Спасибо

Тест в http://jsfiddle.net/BanAz/

<!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>

Ответы [ 3 ]

4 голосов
/ 08 мая 2011

Опции включают в себя:

  • Удалить line-height: 48px и добавить display: table-cell к #layer: http://jsfiddle.net/jgQ9k/1/
    Обратите внимание, что это не будет работать для IE7, потому что display: table-cell isnНе поддерживается.
  • Используйте большой line-height: http://jsfiddle.net/jgQ9k/2/

И метод, который я бы на самом деле использовал:

1 голос
/ 08 мая 2011

Размер высота (48 пикселей) равен высота строки размер (48 пикселей). Попробуйте увеличить размер высоты, и вы увидите, что свойства css работают нормально, а текст будет расположен внизу

0 голосов
/ 08 мая 2011 
#layer {
    display: table-cell;
}
...