Is there an effective way to horizontally center the navigation within a div using responsive CSS?
HTML:
<nav id="centermenu">
<ul>
<li><a href="#">Business</a></li>
<li><a href="#">Specialities</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
I've tried adjusting the CSS by changing 'left: 50%' to '25%', but that didn't work. Any suggestions would be appreciated.
#centermenu {
float: left;
width: 100%;
text-align: center;
border-bottom: 2px solid #011;
background: #ffe;
overflow: hidden;
position: relative;
}
#centermenu ul {
float: left;
clear: left;
position: relative;
list-style: none;
left: 50%;
display: block;
text-align: center;
}
#centermenu ul li {
display: inline;
text-align: center;
margin: 1em;
padding: 1em;
}