Center a text vertically in a fluid container

Question

I have a menu for mobile with 9 links. So, all items must cover 11,1% of the height of the page. It works, and it's ok.

But ! I try to center vertically the link inside the container. And nothing i tried works :( My problem is that vertical % are relative to the width of a container.

Here's where i'am : http://jsfiddle.net/YNGq2/

#menu {
height : auto;
width : 80%;
z-index : 50;
position: fixed;
top : 50px;
background-color: #FFFFFF;
bottom : 0px;
box-shadow: 1px 1px 5px #c7c7c7;
}


.mmline {
border-bottom : 2px solid #777777;
height : 11.1%;
text-align: center;
font-family: NeutrafaceCondensedThin;
text-transform: uppercase;
font-size: 30px;
    vertical-align: center;
}

and the HTML :

<div id="menu">
<div class="mmline">
    title
</div>
<div class="mmline">
    title
</div>
<div class="mmline">
    title
</div>
<div class="mmline">
    title
</div>
<div class="mmline">
    title
</div>
<div class="mmline">
    bandes dessinées
</div>
<div class="mmline">
    title
</div>
<div class="mmline">
    title
</div>
<div class="mmline">
    title
</div>


</div>

What's the best solution for you to center vertically in a fluid container?

Answer 1

If you can add inside mmline than use inline-block property

.mmline:before{
    content:'';
    display:inline-block;
    width:1px;
    height:100%;
    vertical-align:middle;
}
.mmline span{
    vertical-align:middle;
    display:inline-block;
}

http://jsfiddle.net/xGyTN/