3

2 つの画像リンクに加えて、いくつかのテキストを垂直方向に中央揃えにしようとしています。これまでに何十回もこれを行ってきましたが、何らかの理由で現在は機能していません。

コードは次のとおりです。http://jsfiddle.net/KRWNw/

<style type="text/css">
#social-icons {
    height:32px;
    line-height:32px;
}​
</style>

<div id="social-icons">
    Connect:
    <a href="#">
        <img src="http://mydomain.com/rodi/images/facebook.png" width="32" height="32" />
    </a>
    <a href="#">
        <img src="http://mydomain.com/rodi/images/youtube.png" width="32" height="32" />
    </a>
 </div>​

画像を取り出すと、テキストは完全に整列しますが、その中の画像では整列しません。

私は何を間違っていますか??

ありがとうございました！

4

3 に答える 3

3

欠けていることの 1 つは、vertical-align: middle;途中までしか進まないということです。もう 1 つの問題は、インライン イメージです。画像をfloat左右に並べると、正しく配置されます。

http://jsfiddle.net/tU4x7/

この例では、画像はコンテンツの左側にありますが、テキストをスパンでラップすると、テキストもフローティングできます。ただし、同じことを達成するための他のソリューションがあります。

于 2012-09-29T02:09:03.820 に答える
2 
img{
 vertical-align:middle;
}

このcssを使用します。

デモ

于 2012-09-29T02:11:55.347 に答える
0 
img{vertical-align:middle;}

しかし、アイコンはページやコンテンツの実際の部分ではないため、そのようには使用しません。代わりに、img を背景画像として使用することを検討してください。これには優れたCSS フレームワークがあります。

于 2012-09-29T02:17:27.603 に答える