• ベストアンサー

liに画像と文字を表示するCSSの方法

HTML <ul> <li class="home11"><h3><a title="Homeページ" href="../index.html" class="moji5011">Home</a></h3> </ul> CSS a.moji5011 { color: #c60; font-size: 85%; font-weight: 700; text-decoration: none; margin-left: 0; padding: 3px; width: 80px; height: 20px } a:hover.moji5011 { color: #000; font-weight: 700; text-decoration: none; margin-left: 0; padding: 3px } li.home11 { background-image: url("http://www6.big.or.jp/~neon/BTNFLD/BTNIMG/BTN03/btn04smp.gif"); background-repeat: no-repeat; text-align: center; list-style-type: none; margin-right: 5px; width: 80px; height: 20px; float: left } と設定しているのですが、エクスプローラーでは画像の上にHomeが中央に位置しているのですが、Firefoxでは文字が上部に位置して、これをFirefoxでも中央に表示するにはどのようにすればいいのでしょうか。 ボタン全部をリンク対象にするようにしています。

質問者が選んだベストアンサー

  • ベストアンサー
  • parumon
  • ベストアンサー率85% (6/7)
回答No.2

<h3>タグを取ってしまえば問題ないのですが。。。 <hx>タグにはデフォルトでマージンの設定がしてあるので、0にしてしまえばいいです。CSSに h3 {margin: 0;} の設定を追加すれば大丈夫なはずです。 補足ですが</li>もきちんとつけておいた方がいいですよ。

その他の回答 (2)

回答No.3

a.moji5011にdisplay:blockとline-height:20pxを追加 で出来ると思います(未検証)

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

上部?vertical-align?の事かな? ちなみにやるとしたらh3側で指定しないとならないかもね

関連するQ&A

専門家に質問してみよう