9

私は今、何時間も探しています（明らかに適切な場所ではありません！）

このサンプルを検討してください: http://jsfiddle.net/DYLs4/9/

<div id="wrapper">
    <span id="text24">Text 24</span>
    <span id="text12">Text 12</span>
    <span id="icon"></span>
</div>

CSS:

#text24{
    font-size:24px; color:#999;   
}
#text12{
    font-size:12px; color:#000;  
}
#icon{
    height:36px; width:36px;
    display:inline-block;
    background:url(some-icon.png);
}​

な 結果

私が達成しようとしているのはこれです：

  • text24 を垂直方向に中央揃え (画像に対して)
  • text12 の下部を text24 の下部に揃えます
  • すべてが IE6 -> chrome で動作することを確認してください

ゴール

助けてくれて本当にありがとうございます！

4

4 に答える 4

23

あなたのイメージに追加vertical-align: middleします。

編集

コメントによると、このソリューションにはdisplay:inline-block;も必要です。.

于 2012-05-16T09:17:18.337 に答える
2

これは機能しています

http://jsfiddle.net/rizwanabbasi/frsA5/1/

于 2012-05-16T09:44:34.187 に答える
0

ほとんどのデザイナーがレイアウトにテーブルを使用することを嫌っていることは知っていますが、とにかく試してみましょう。テーブルを使用できvalignます。

于 2012-05-16T09:19:13.120 に答える
0

最終結果

http://jsfiddle.net/rizwanabbasi/frsA5/

<div id="wrapper">
    <span id="text24">Text 24</span>
    <span id="text12">Text 12</span>
    <img src="http://www.adlittle.com/fileadmin/templates/images/rss_feed_icon.png" id="icon"/>
</div>

#wrapper{
    position:absolute; left:0;
}
#text24{
    font-size:24px; color:#999; font-weight:bold;
}
#text12{
    font-size:12px; color:#000; font-weight:bold; }
#icon{
    height:36px; width:36px;
    display:inline;
    vertical-align:middle;
    }
于 2012-05-16T09:33:38.840 に答える