html - Vertically aligning text inside a link inside an that needs to expand horizontally

Question

I need to make a menu that on mobile has the links expand to full width. Something similar to this wireframe.

My code so far:

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 */
}    

This is my result so far (colors used only for testing)

If I change the #shortcuts ul li a to display: block;, I can get the desired width. But then the text will not center vertically.

Not a duplicate of CSS Positioning anchor inside li vertically aligned because that is only partial part to vertically align the text. Does not answer how to make the link expand 100% width.

Answer 1

You need to use both "display: block;" and "line-height:60px;" for "#shortcuts ul li a {"

Updated code:

#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 */
} 

Please refer the fiddle :- http://jsfiddle.net/aasthatuteja/6WEW6/