响应式菜单垂直居中文本

【问题标题】：Responsive Menu Vertical Center Text响应式菜单垂直居中文本
【发布时间】：2014-04-15 16:35:35
【问题描述】：

我正在尝试创建一个包含 4 个链接的响应式菜单。链接应该垂直居中，a 应该比li 大。

很遗憾，ul li a 上的line-height: 100% 不起作用。想法？

【问题讨论】：

标签： html css responsive-design media-queries fluid-layout

【解决方案1】：

<ul>
    <li><a href="#"><span>Link</span></a>

    </li>
    <li><a href="#"><span>Link</span></a>

    </li>
    <li><a href="#"><span>Link</span></a>

    </li>
    <li><a href="#"><span>Link</span></a>

    </li>
</ul>

CSS（更改部分）：

ul li a {
    display: block;
    text-align: center;
    background: orange;
    overflow: hidden;
    height: 100%;
}
ul li a span {
    display: block;
    position: relative;
    top: 50%;
}

【讨论】：

【解决方案2】：

使用table-cell 试试这个。 Fiddle

CSS

ul {
    height: 100%;
    list-style: none;
    display:table;
    width:100%;
}

ul li {
    height: 25%;
    display:table-row;
}

ul li a {
    display: table-cell;
    text-align: center;
    background: orange;
    vertical-align:middle;
    border-bottom:1px solid white;
}

【讨论】：