0

かなり基本的な質問-リスト内のアイコンを垂直方向に揃えることができないようです。

私のCSSは次のように見えます：

#top_content img {
float: left;
}

#top_content ul {
float: right;
}

#top_content li img {
vertical-align: sub;

}

#top_content li {
list-style-type: none;
display: inline;
}

#top_content li a {
text-decoration: none;
color: #7aa807;
}

私のHTMLは次のようになります。

<div id="top_content">
<ul>
<li><img src="../img/mail_ico.png" alt="#"><a href="#"><strong>(1 New)</strong></a></li>
</ul>
</div>

何か案は？私はここで何が間違っているのですか？

4

4 に答える 4

3

それに追加line-heightしてみてください：

#top_content img {
  float: left;
  line-height:20px; /* adjust accordingly */
}
于 2010-07-15T14:11:13.333 に答える
2

vertical-alignが正しく機能することを期待しています:)あなたの場合、mail_ico.pngを<a>の背景画像として設定することは可能でしょうか？これが、デザインにおいて画像の垂直位置が重要な場合に対処する方法です。

于 2010-07-15T14:10:46.623 に答える
1

画像をしないfloatでください。それはもはやinline行動ではなく、それがあなたの問題を引き起こしているのです。

于 2010-07-15T14:13:53.580 に答える
1

float: left基本的にの効果をキャンセルしていますvertical-align。vertical-aligncは、同じテキスト行上の他のインライン要素へのインライン要素の配置を制御します。効果のないブロック要素をfloat: left作成します。imgvertical-align

于 2010-07-15T14:15:56.363 に答える