I have a navigation bar that it spanning the entire page's width. I've also added a jQuery script so that it changes to position:fixed after scrolling for a bit, but I don't think that will influence this issue.
My issue is that I can't get the navigation bar <li>'s to center. I've tried countless things I've found on the internet, and even downloaded some templates to splice in. No luck. I'm sure I'm just missing something, but I'd like the <li>'s to go smack-dab in the middle of the navbar, but everything I've tried either makes them slightly off, floats them to the left, or makes them not resize properly.
Here's my HTML:
<!doctype html>
<html lang="en"> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <script src=""></script> <script src="script.js" type="text/javascript"></script> </head> <body> <h1>Blah blah blah</h1> <!--START NAVBAR--> <div> <ul> <li><a>Home</a></li> <li><a>Home</a></li> <li><a>Home</a></li> </ul> </div> <!--STOP NAVBAR--> <div> <p> Lorem ipsum dolor sit amet... </p> <p> Nullam pellentesque nunc luctus... </p><p> Donec sodales fermentum orci... </p><p> Ut venenatis tellus ... </p><p> Nullam quis molestie nunc... </p> </div> </body>And the CSS:
body{
background-image:url("woodPatternShadow.png");
background-size:75% auto;
padding:0;
font-family:"Verdana";
}
.nav{
height:40px;
background-color:rgba(0,0,0,0.25);
left:0;
right:0;
box-shadow: inset 0 3px rgba(255, 255, 255, 0.4), inset 0 10px 4px rgba(255, 255, 255, 0.3),inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(28,0,0,0.3);
border:1px solid rgba(0,0,0,0.1);
margin:0;
position:absolute;
}
#fixNav{
position:fixed;
top:0px;
}
.nav ul{
}
.nav ul li{
}
.nav ul li a{
}
.content{
background-color:white;
border-radius:20px;
padding:10px;
width:70%;
margin:100px auto 0;
}The empty selectors are the places where I can't figure it out.
Can someone clear this up for me?
4 Answers
Set the ul to have text-align: center and set display: inline-block on the li elements.
.nav ul { list-style: none; text-align: center;
}
.nav ul li { display: inline-block;
}Elements with display: inline-block are treated as inline elements even though they act like block elements in most respects, so setting text-align: center on the container will center the inline li elements inside of it.
Obviously this is a barebones functional answer - you will need to add styles to adjust presentation of the li and a elements. All this code does is remove the default bullets and centers the li elements.
There's always
text-align: center;Then there's:
.nav ul li{ display: table; margin-left: auto; margin-right: auto;
}2nd is probably the best way but if you want text centered anyway then the first might be fine (EDIT: In which case Ennui's answer is more complete).
Apply list-style:none and text-align:center to .nav class.
CSS:
.nav{ ---- ---- list-style:none; margin:0; padding:0; text-align:center;
}
.nav li{ display:inline;
}
.nav a{ display:inline-block; padding:10px;
}just add this
nav { background-color: rgb(0, 0, 0); overflow: hidden; font-family: consolas; align-items: center;
}
nav a { text-decoration: none; padding: 20px; text-align: center; float: center; color: white; margin-left: auto; margin-right: auto;
}<nav align="center"> <a href="#">Home</a> <a href="#">Videos</a> <a href="#">Resources</a> <a href="#">Projects</a> <a href="#">About Us</a> </nav>
