Выравнивание текста внутри якоря - PullRequest
Новая
       14

Выравнивание текста внутри якоря

2 голосов
/ 17 декабря 2011

У меня проблема.Я пытаюсь получить текст внутри тега привязки для выравнивания в нижней части изображения внутри тега привязки.

Вот как это показано сейчас: http://i.imgur.com/ziyri.jpg

Вот как это должно выглядеть: http://i.imgur.com/mcLmo.jpg

Я пробовал все с помощью свойства вертикального выравнивания в CSS, но оно не работает.

Любая помощь?это запрос HTML и CSS код 

#facebook { float: left; margin-top: 10px; margin-right: 10px; height: 22px; }

#facebook a { font-family: Gerogia; font-size: 18px; font-style: italic; color: #808080;      text-decoration: none; }

#facebook a img, #facebook a span {
vertical-align: text-bottom;
}

<div id="facebook"> <!-- Start facebook -->
<a href="#">
    <span>Like Us&nbsp;</span><img src="images/facebook.jpg" alt="Facebook" />
</a>
</div> <!-- End facebook -->

Спасибо!

Ответы [ 2 ]

6 голосов
/ 17 декабря 2011

Установите высоту строки тега привязки равной размеру шрифта текста «span».Кроме того, выровнять по вертикали: снизу.

РЕДАКТИРОВАТЬ:

Попробуйте использовать «вертикальное выравнивание: низ» вместо «вертикальное выравнивание: текст нижнее». Проверьте эти опции в w3schools по спецификации «вертикальное выравнивание». (не связано с w3c)

РЕДАКТИРОВАТЬ:

Сделайте высоту строки вашего "span" текста равной его размеру шрифта.Я думаю, что высота строки на самом деле больше, и именно поэтому вы видите, что она совершенно НЕ выровнена внизу ... потому что вся форма / ячейка текста - это высота строки, а НЕ размер шрифта.Чтобы нормализовать, сделайте его равным вот так (при условии, что вы сохранили размер шрифта 18 пикселей): 

#facebook a span {
    line-height: 18px;
}

Страница, в которой есть некоторые подробности, объясняющие это, находится здесь.

0 голосов
/ 17 декабря 2011

Вот отличная статья Криса Койера, объясняющая, что происходит в этой ситуации: http://css -tricks.com / what-is-vertical-align /

...