0

私は2つのモジュールを持っています:

.master-headerと_.header-nav

はの.header-nav内部に.master-headerあり、単純なナビゲーションです。

<nav class="header-nav">
          <ul>
            <li class="active">
              <a href="/home">Home</a>
            </li>
            <li class="">
              <a href="/here">Item</a>
            </li>
            <li class="">
              <a href="/photos">Photos</a>
            </li>
            <li class="">
              <a href="/here">Item</a>
            </li>
          </ul>
        </nav>

私の.header-navモジュールではheight、aをli100 ul% に設定し、heightを.header-nav内100pxから設定します.master-header。これは、その子のレイアウト スタイルがどこに属すべきかについて論理的に正しいためです。

aさて、テキストを's内で垂直方向に中央揃えにしたいので、問題が発生します。行の高さはこれに最適ですが、100% はフォントの高さであるため、100% は機能しません。line-height: 100px問題を解決するために使用するのに最適なものですが、それを.header-navモジュール内に配置するのは間違っているようです。これは、 ALL.header-navがそのようであるべきであることを示しているためです。できれば50%とか言いたいところですpadding-top: 50%が、商品の幅にもよるので無理です。

何をすべきかについて何か考えはありますか？

ニール

4

1 に答える 1

-1

垂直方向の配置を実現するために、display: table-cell を使用できます。

.header-nav {height: 100px}

.header-nav ul,
.header-nav li {height: 100%}

.header-nav ul {display: table;}
.header-nav li {display: table-cell; vertical-align: middle}

動作するバージョンについては、このプランカーをチェックしてください

于 2013-11-13T10:15:24.627 に答える