0

これを行う最善の方法は何ですか？

これが私のhtmlです：

<div id="wrapper">
   <img src="http://i.imgur.com/b8xFk.jpg" /> <span id="text">Twitter</span>
</div>

そして私のCSS：

#wrapper{
  background-color:orange;
  height:60px;
  padding: 10px;
}

#wrapper img{
  vertical-align:middle;
}

#wrapper #text{
  line-height:60px; 
}

そして、jsfiddle

ご覧のとおり、画像はテキストよりも低くなっています (少なくとも Firefox 16 では)。つまり、物事はさらに不安定になります。クロスブラウザーの互換性のために画像をテキストに垂直方向に配置するためのベスト プラクティスは何ですか?

前もって感謝します。

4

2 に答える 2

1

これを試して：

#wrapper img{
  vertical-align:middle;
  /*New:*/
  padding-bottom:4px;
}

デモ

于 2013-01-09T02:44:54.083 に答える
0

OPはこちら。これが私がやろうとしている方法です。よりクリーンな方法があるかどうかはわかりません。助言がありますか？

HTML:

<div class="foo">
<a href="#">
    <img src="http://i.imgur.com/b8xFk.jpg" />
    <span class="bar">&nbsp;Facebook </span>
</a>

CSS:

.foo {
    height: 50px;
    line-height: 50px;
    background-color:orange;
}

.bar{
   font-size: 14px;
   line-height: 26px;
   vertical-align: middle;
}

.foo img {
    vertical-align: middle;
    margin-left: 10px;
}

.foo a{
    text-decoration: none;
}

最後に、ここにjsFiddleがあります

ありがとう

于 2013-01-09T17:39:16.613 に答える