Responsive Menu Vertical Center Text

Question

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

I'm trying to create a responsive menu with 4 links. The links should be VERTICALLY centered and the a should be larger as the li .

line-height: 100% on the ul li a doesn't work, unfortunately. Ideas?

Answer 1

here is a 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 (changed part):

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

Try this using 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;
}