将文本内部的文本垂直对齐<li>中需要水平扩展的链接</li>

Question

我需要制作一个菜单，在移动设备上将链接扩展到全宽。类似于这个线框的东西。

到目前为止我的代码：

HTML

<div id="shortcuts">
    <ul>
        <li><a href="#">Categories</a></li>
        <li><a href="#archives">Archives</a></li>
    </ul>
</div>

CSS

#header {
    width: 100%;
    height: 180px;
    background-color: #666;
    color: #fff;
}

#shortcuts { position: absolute; z-index: 20; top: 0; left: 0; right: 0; }

#shortcuts ul {
    display: table;
    width:100%;

    height: 180px; /* for testing only */
}

#shortcuts ul li {
    list-style: none;   
    display: table;
    height: 60px;
    width:100%;
    display: block; 
    vertical-align: middle;

    background-color: red;   /* for testing only */
    border: blue 3px solid;  /* for testing only */
}

#shortcuts ul li a {
    width: 100%;
    height: 60px;       
    text-decoration: none;
    display: table-cell;
    vertical-align: middle;

    border: 2px dashed green; /* for testing only */
}    

这是我到目前为止的结果（颜色仅用于测试）

如果我将#shortcuts ul li a更改为display: block;，我可以获得所需的宽度。但是文本不会垂直居中。

不是CSS Positioning anchor inside li vertically aligned的副本，因为这只是垂直对齐文本的部分内容。不回答如何使链接扩展100％宽度。

Answer 1

您需要同时使用“display: block;”和“line-height:60px;”作为“#shortcuts ul li a {”

更新的代码：

#shortcuts ul li a {
    width: 100%;
    height: 60px;       
    text-decoration: none;
    display: block; 
    line-height:60px;
    vertical-align: middle;

    border: 2px dashed green; /* for testing only */
} 

请参考小提琴： - http://jsfiddle.net/aasthatuteja/6WEW6/