I've made this code for navigation bar. HTML :

<div class="header-nav">
        <div class="header">
            <img src="../Pictures/LifeFrame/2.jpg"/ width="100%" height="100px">
        </div>
        <div class="nav" align="center">
            <a href="#">Home</a>
            <a href="#">Gallery</a>
         </div>
    </div>

CSS :

.header-nav{
position:fixed;
top:0;
width:100%;
left:0;
right:0;
}
.nav{ 
    height: 42px;
    background-color:#FF0000;
}
a{
    display:inline-block;
    width:50%;
    height:42px;
    float:left;
}

but the text in tag a is on top not in middle. how to make the text in a tag with display inline block to middle ?