响应式菜单垂直中心文本

Question

JSFiddle：http://jsfiddle.net/BL5vd/

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

不幸的是，line-height: 100%上的

ul li a不起作用。想法？

Answer 1

这是一个FIDDLE

HTML：

<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%;
}

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