When creating a navigation bar with li elements floated left, the text also floats left. How can I center the text in the navigation bar? I have tried using text-align:center;, but it doesn't center the text on the y-axis. Some suggest using padding to center the text, but adjusting padding for each additional li can become tedious. Is there a more efficient method, perhaps using display:inline? Any other suggestions would be appreciated. Below is my CSS code:
ul {
list-style: none;
}
ul li {
float: left;
font-size: 20px;
width: 130px;
height: 50px;
border-right: 1px solid blue;
text-align: center;
}
Here is the HTML code:
<body>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</body>