vertical-align within an <li> tag - html

Question

HTML:
<div id="navbar">
<div id="container">
<ul style="height:40px">
<li><p id="navtext">Home</p></li>
</ul>
</div>
</div>
CSS:
ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li {
float:left;
}
#navtext {
color:#FFFFFF;
padding-bottom:-50px;
}
#navbar {
width:100%;
height:40px;
background-color:#3498db;
}
#container {
margin-right:15%;
margin-left:15%;
vertical-align: middle;
}
I would like to have the "Home" text centered within the <ul> tag that is 40px tall. I have tried looking around for an answer but nothing I try seems to work. I'm trying to make a navbar for my site.

Answer 1

Add in your css:
#container ul li {line-height:10px;}
http://jsfiddle.net/PWTcL/

Answer 2

Try:
li {
float:left;
height:100%;
display:table;
}
#navtext {
color:#FFFFFF;
padding-bottom:-50px;
display:table-cell;
vertical-align:middle;
}
Fiddle here.

Answer 3

If you only have a single line, use line-height: 40px, and remove margin on <p> :
ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li {
float:left;
line-height: 40px;
margin: 0 5px;
}
.navtext {
color:#FFFFFF;
margin: 0;
padding-bottom:-50px;
}
#navbar {
width:100%;
height:40px;
background-color:#3498db;
}
#container {
margin-right:15%;
margin-left:15%;
vertical-align: middle;
}
<div id="navbar">
<div id="container">
<ul style="height:40px">
<li><p class="navtext">Home</p></li>
<li><p class="navtext">Link</p></li>
<li><p class="navtext">Contact</p></li>
</ul>
</div>
</div>