Выравнивание текста в привязке

Question

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

Вот как это теперь показывает: 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 --> 

Спасибо!

Answer 1

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

EDIT:

Попробуйте использовать "вертикальное выравнивание: снизу" вместо "вертикального выравнивания: текст сверху вниз". Check out these options from w3schools on the "vertical-align" spec. _{(не связанные с w3c)}

EDIT:

Сделайте высоту строки вашего «Пролет» текст, равного его размер шрифта. Я думаю, что высота линии на самом деле больше, и именно поэтому вы видите, что она не СОВЕРШЕННО выровнена внизу ... потому что вся фигура/ячейка текста - это высота линии и НЕ размер шрифта. Для того, чтобы нормализовать, сделать его равным, как это (предполагая, что вы сохранили размер шрифта в 18px):

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

A page going into some detail explaining this is here.

Answer 2

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