Question

我有两个模块：

.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和li的{{1}}为100％，然后设置{{1}来自ul的{{1}} height的{{1}}的逻辑正确，以及其所属儿童的布局样式应该属于哪个。

现在，问题出现了，因为我希望将文本垂直居中于.header-nav。线高是完美的，但100％不会工作，因为100％是字体的高度。 100px是用来解决问题的最佳选择，但是将其放在.master-header模块中似乎是错误的，因为它表明所有a都应该像那。我更倾向于说50％这样的东西，但我根据项目的宽度不能line-height: 100px。

有关该怎么做的任何想法？

尼尔

Answer 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}

Check out this plunker for a working version

坚持模块化造型

1 个答案: