How to center navigation bar items CSS

StackOverflow https://stackoverflow.com/questions/22642436

  •  21-06-2023
  •  | 
  •  

Domanda

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="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="script.js" type="text/javascript"></script>
    </head>

    <body>
        <h1>Blah blah blah</h1>

        <!--START NAVBAR-->
        <div class="nav">
            <ul>
                <li><a>Home</a></li>
                <li><a>Home</a></li>
                <li><a>Home</a></li>
            </ul>
        </div>
        <!--STOP NAVBAR-->

        <div class="content">
            <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?

È stato utile?

Soluzione

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.

Altri suggerimenti

There's always 

text-align: center;

http://jsfiddle.net/M4Q5h/

Then there's:

.nav ul li{
    display: table;
    margin-left: auto;
    margin-right: auto;
}

http://jsfiddle.net/gnM5f/

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;
}

See demo

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>

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top