プロが教える店舗＆オフィスのセキュリティ対策術

vertical-align:middleをFirefoxで実現させたい

解決済

  • 質問者：izuizumin
  • 質問日時：
  • 回答数：3件

ナビゲーションをhtmlで以下のように記述しています。

<div id="navi">
<ul>
<li><a href="index.html"><img src="images/rogo_s.gif" /></a></li>
<li><a href="information.html">Information</a></li>
<li><a href="history.html">History</a></li>
<li><a href="invitation.html">Invitation</a></li>
<li><a href="members.html">For members</a></li>
</ul>
</div>

cssは以下のとおりです。
上記のナビゲーションを横並びにしています。
#navi li{
display:inline;
list-style-type:none;
margin:15px;
vertical-align:middle;
}

liの先頭にはロゴ画像を配置しています。
ロゴは、テキストで記述したメニューよりも高さがあるので、横並びにしたときに、下揃えになってしまいます（vertical-align:bottomのイメージ）。
そこで上記のように、cssに「vertical-align:middle」を加えたところIE7では思い通りになりましたが、Firefoxでは下揃えのままになってしまいます。

Firefoxでも真ん中揃えにする方法はないでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： Luna0602
  • 回答日時：

実際に掲載して頂いたHTMLソースとCSSで試して見ました。


確かにこのままですとご報告と同じような状態になりました。

そこで、私が何回かいろいろ試してみたところ、「vertical-align:middle;」をimg要素に直接指定（<img src="images/rogo_s.gif" style="vertical-align:middle;" />　という具合です。）してみたらFirefoxでも真ん中揃えになりました。

以下に、私が試した後、Firefox/IE両方で真ん中揃えが実現できたソースを書いておいて見ます。
お役に立てれば幸いです。

------------------------------

<html>
<head>
<title>Sample</title>
</head>
<style>
<!--
#navi li{
display:inline;
list-style-type:none;
margin:15px;
}
-->
</style>
<body>
<div id="navi">
<ul>
<li><a href="index.html"><img src="images/rogo_s.gif" style="vertical-align:middle;" /></a></li>
<li><a href="information.html">Information</a></li>
<li><a href="history.html">History</a></li>
<li><a href="invitation.html">Invitation</a></li>
<li><a href="members.html">For members</a></li>
</ul>
</div>
</body>
</html>

------------------------------
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご丁寧でわかりやすいご回答ありがとうございます！無事うまくいきました。

通報する
お礼日時：2008/06/11 15:13

No.3

  • 回答者： bhkhk
  • 回答日時：

#navi li{


display:inline;
list-style-type:none;
margin:15px;
vertical-align:middle;
line-height:(ロゴの高さ)
}

でどうでしょうか？
    • good
    • 0
    • 件
通報する
この回答へのお礼

line-heightを足してみましたがうまくいきませんでした。
No１、２の方のやり方でやらせていただきました。
ご回答いただいてありがとうございました！！

通報する
お礼日時：2008/06/11 15:15

No.1

  • 回答者： steel_gray
  • 回答日時：

#navi li img{


vertical-align:middle;
}
で、どうでしょう。

http://www.y-adagio.com/public/standards/tr_css2 …
LIに指定してうまくいくIEの表示の方が謎だけど…
    • good
    • 0
    • 件
通報する
この回答へのお礼

できました！ありがとうございました！！

通報する
お礼日時：2008/06/11 15:12

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報