Does anybody know how i could center my <li>
elements within my <div>
element that has been centered using margin: auto
? i am trying to create a nav bar. i’ve centered the bar, but my <li>
elements are positioned using position:absolute(left input, top input)
so they’re not truly centered. Only centered on my screen.
HTML:
<div id="navbar"></div>
<ul>
<li style="position:absolute; left: 590px; top: -35px"><a href="#about">About</a></li>
<li style="position:absolute; left: 674px; top: -35px" id="navbutton"><a href="#portfolio">Portfolio</a></li>
<li style="position:absolute; left: 795px; top: -35px" id="navbutton"><a href="#contact">Contact</a></li>
</ul>
CSS:
body {
background-color:black;
background-image: url("http://wallpapercave.com/wp/uYCIXAw.jpg");
background-repeat: no-repeat;
background-size: cover;
}
ul {
list-style-type: none;
margin: 0; padidng:0; position:fixed;
}
a {
border-radius: 10px;
width: 120px;
background-color: rgb(80, 150, 600);
color: white;
text-decoration: none;
font-weight:bold;
text-transform: uppercase;
text-align: center; padding: 10px;
}
li {display: inline; }
#navbar {
width: 350px;
height: 50px;
opacity: .5;
background-color: rgb(0, 120, 120);
margin: auto;
}