css - 具有流体高度的 anchor 的文本垂直居中

Question

我正在努力实现这个实现:

容器是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 技巧不起作用。窗口的高度显然是流动的，因为它应该在每个设备上响应。想法？

Answer 1

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