アンカー内のテキストの整列

Question

問題があります。私は、アンカータグの内側のテキストをアンカータグの内側の画像の下部に揃えようとしています。ここで

は今方法を示している：私はCSSで縦-alignプロパティですべてを試みたが、それは働いていないhttp://i.imgur.com/mcLmo.jpg

：http://i.imgur.com/ziyri.jpgここ

は、見えるようになっています方法です。

助けが必要ですか？ここで

は、要求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"テキストのfont-sizeと同じに設定します。また、vertical-align：bottom。

EDIT：

使用してみてください "垂直整列する：底部" の代わりに "垂直整列：テキスト底"。 Check out these options from w3schools on the "vertical-align" spec._{（W3Cに関連付けられていない）}

EDIT：

は、そのフォントサイズに等しいあなたの「スパン」テキストの行の高さを確認します。私は、線の高さが実際にはもっと大きいと思うので、それは完全に下に整列していないのを見ているのです...なぜなら、テキストの全体の形状/セルは線の高さであり、font-sizeではないからです。 、正規化（あなたは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/