具有流体高度的锚的垂直居中文本答案

【问题标题】：Vertically center text of an anchor with fluid height具有流体高度的锚的垂直居中文本
【发布时间】：2014-04-15 15:14:14
【问题描述】：

我正在尝试实现这个实现：

容器是height: 100%，li 分别是height: 50%。链接高度为 50%，整个彩色区域应该是可点击的。这是我的代码：

html, body {
    height: 100%;
}

.menu {
    height: 100%;

    ul {
        height: 100%;

        li {
            height: 50%;

            a {
                display: block;
                height: 100%;
                line-height: 100%;
            }
        }
    }
}

很遗憾，line-height 技巧不起作用。窗口的高度显然是可变的，因为它应该在每个设备上都响应。想法？

【问题讨论】：

标签： css html responsive-design fluid-layout

【解决方案1】：

尝试在<li> 元素上设置line-height: 50%。

【讨论】：

【解决方案2】：

如果你这样做呢？ http://jsfiddle.net/SBag9/2/

.menu {

height: 100%;
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
margin-top: 50%;
}

【讨论】：

我需要良好的浏览器支持，而 flex 的东西似乎不太受支持。

【解决方案3】：

您可能需要使用相对位置和绝对位置之类的东西来实现这一点。

html, body {
    height: 100%;
    margin:0px;
    padding:0px;
}

.menu {height: 100%;}
.menu ul {
        height: 100%;
        list-style:none;
        margin:0px;
        padding:0px;
}
 .menu ul li {
            height: 50%;
            width:100%;
            display:table;
}

.menu ul li a {
    display:table-cell;
    vertical-align:middle;
    text-decoration:none;
    font-weight:bold;
    text-align:center;
    color:#000;
}

这是一个有效的小提琴：

http://jsfiddle.net/qsHw2/2/

【讨论】：

li 的整个区域都应该是可点击的。因此a 元素需要比整个li 更大。这种方式不行。
我已经编辑了帖子并更新了小提琴。现在整个 li 都可以点击了！