We would like to know how to align text to menu center in navigation bar.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.nav {<!--from w ww.j a v a2 s. c om-->
border: 1px solid #ccc;
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
background-color: red;
}
.nav li {
display: inline;
}
.nav a {
display: inline-block;
padding: 10px;
text-decoration: none;
color: #000000;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="">Home</a></li>
<li><a href="">About me</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Contact</a></li>
</ul>
</body>
</html>
The code above is rendered as follows: