navbar text elements not vertically aligned (CSS/Bootstrap)

I have been trying to get the text of my navbar elements to centrally vertically aligned but just can't seem to do it.

Here is the bootstrap I have been using: http://ift.tt/1OVjj5D

Below is my current CSS style file:

body {
background-color: #FFF;
}

#pageHeaderTop {
background-color: #FFFFFF;
width:100%;
border-bottom-style: solid;
border-width: 1px;
border-color: #D1D1D1;
height: auto;
}

#pageHeaderBottom {
background-color: #D1D1D1;
width:100%;
border-top-style: solid;
border-width: 1px;
border-color: #FFFFFF;
}

.logoHeader {
width: 1200px;
text-align: left;
padding: 20px;
}

.nav {
width: 1200px;
}

.nav a {
color: #5A5A5A;
font-size: 11px;
font-weight: bold;
/* 10px top & bottom 14px left and right*/
padding: 10px 14px;
text-transform: uppercase;
}

.nav li {
display: inline;
}

#pageContent {
border:#999 1px solid;
border-top: none;
background-color:#F4F4F4;
width:1200px;
}

.contentArea {
text-align: left;
margin-left: 24px;
}

#pageFooter {
border:#999 1px solid;
border-top: none;
background-color:#F4F4F4;
width:1200px;
}

Any help is greatly appreciated. I'm fairly new to web development so if you could expain in layman terms that would be great!