cssデザイン - Mozilla で見る -コミュの【xhtml + css】タイトル画像とテキストをきれいに横に並べるには

こんばんは。

タイトル画像とhtmlテキストをきれいに横に並べたいのですが、
上のサンプル画像のように、htmlテキストが下にズレてしまいます。

上のサンプル画像のように、
現在は一つの div id (ex.#menu_a) に画像とテキストを入れています。

css の vertical-align などでも調整ができません。

このような場合、一つのdiv id でなく、いくつかに分けた方が良いのでしょうか？

もし何かアドバイス頂けましたら幸いです！
よろしくお願いします。

コメント(6)

最初
全て
最新の40件

[4] mixiユーザー 06月13日 01:54

xhtmlソースは、
<div id="menu_a">
<img name="title_a" src="images/title_a.jpg" width="100" height="20" >　<a href="" target="">MENU A1</a>　<a href="" target="">MENU A2</a>　<a href="" target="">MENU A3</a>
</div>

cssは、
#menu_a {
margin-top:6px;
width:880px;
height:20px;
}

line-heightはなぜかうまく機能しません。もう一度やってみます。

img に「vertical-align: middle;」にすると、今度はテキストが中心よりも上に行ってしまいます。

こういった時はどうしてるんでしょう？？

[6] mixiユーザー 06月13日 02:42

飴さん、ありがとうございます。

#menu div#menu_a img {
vertical-align: middle;
}
でだいぶ近い表示になりました。

自分のソースを疑ってテストすることと、ポストの仕方を気をつけます。すいません。

スペースでのしのぎは、margin or padding にします。。
ありがとうございます！

ログインすると、みんなのコメントがもっと見れるよ