0

ヘッダーの水平ナビゲーションメニューで、インライン化されたリストアイテムの垂直方向の配置に問題があります。残りのレイアウトのため、フロートを使用できません。

リストアイテムにはもっと大きな行の高さを使用できると思っていましたが、今回はそれほど役に立ちません。少なくとも私がGoogleDroidフォントを使用しているときは、リストアイテムは多かれ少なかれそこに座っています。縦揃えも試しましたが、何もしませんでした。

基本的な構造は、header-> header-content-> Navigation> li> aです。すべてのリスト項目はdisplay:inlineに設定されています。囲まれた画像を持つリストアイテムで囲まれたh1要素もあります:li> h1> imgとそこにサブメニュー:li> ul >> li> a、39pxの固定高さがあるため、画像は物事を複雑にします。

ヘッダーdivは、4emの高さと背景色を設定します。ナビゲーションのコンテンツを垂直方向に揃える必要があるのは、これら4つのemの範囲内です。

この種の垂直方向の配置を実現する方法について、いくつかのアイデアが必要です。提案?:-)

あなたはここで問題の完全なコード例を見つけることができます:http://pastebin.com/zcLspjJz

最新のブラウザとIE7以降をサポートする必要があります。しかし、どんなアイデアでも大歓迎です。

4

1 に答える 1

1

これらの方法を試すことができ、それが役立つ場合は次のようになります。

  • heightline-heightプロパティを使用し、両方に同じ値を使用します。(例height:20px;line-heigt:20px;
  • またはを設定しますdisplay:table-cell; vertical-align:middle;
于 2012-09-26T10:26:18.853 に答える