Vertically align on css

Question

Hi there im new to css3 and ive searched for hours on how to align text vertically in my navbar. i have tried every solution found here at stackoverflow but wasn't able to correct my problem. so i tought that maybe it was my code itself and decided to put it here and ask for help.

I want to know how to vertically align my navbar using css. Here is what i have so far...

#nav{
    margin:0px;
    padding:0px;
    width:100%;
    height:80 px;
    background-image:url('images/navbar bg.png');
    background-repeat:repeat-x;
    text-align:center;
}

#nav ul{
    margin:0;
    padding:0;
    list-style-type:none; 
    overflow:hidden;
    display:inline-block;
    vertical-align:middle;
}

#nav li{
    margin:0px;
    padding:0px;
    float:left;
}

#nav a{
    margin:0px;
    padding:0px;
    width:114px;
    height:80px;
    background-image:url('images/btn.png');
    background-repeat:no-repeat;
    text-decoration:none;
    text-transform:uppercase;
    display:block;
}

And my html look like this...

<div id="nav">
    <ul>
    <li><a href="#home">HOME</a></li>
    <li><a href="#services">SERVICES</a></li>
    <li><a href="#about">ABOUT</a></li>
    <li><a href="#contact">CONTACT</a></li>
    </ul>
</div>

Id deeply apreciate any help you could give me.

Answer 1

Try using vertical-align:middle at #nav a, or if it doesn't work, at #nav li.

Answer 2

By using 3 lines of code you may get vertically center on unknown height. check the DEMO.

#nav ul{
margin:0;
padding:0;
list-style-type:none;
  /*Need to add only 3 lines for vertical align*/
position: relative;
top: 30%;
transform: translateY(-30%);
}

Answer 3

Change the CSS for your #nav a links to use display:table-cell; and vertical-align:middle;.

jsFiddle example

Answer 4

You can use the line-height rule on your #nav li

#nav li{
  margin:0px;
  padding:0px;
  float:left;
  line-height: 5.5em;
}