Centering navigation bar

问题

I am having trouble centering my navigation bar, I have tried display:inline-block and then align center like most posts suggest but it doesn't seem to be working.

HTML:

<!--Navigation-->
<div class="band navigation">
    <nav class="container primary">
        <div class="sixteen columns">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
    </nav>
</div>

CSS:

nav.primary{
  display: table;
  margin: 0 auto;
}

nav.primary ul, nav.primary ul li {
  margin: 0px;
}

nav.primary select {
  display: none;
  width:  100%;
  height: 28px;
  margin: 21px 0;
}

nav.primary ul li {
  display: inline;
  float: left;
  position: relative;
}

nav.primary ul li a {
  display: inline-block;
  line-height: 49px;
  padding:  0 14px;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 0.08em;
  background: ##999999;
}

nav.primary ul li a:hover {
  background: #2ecc71;
  cursor: pointer;
}

回答1:

Ok finally got it:

nav.primary ul li {
display: inline;
float: left; <---
position: relative;

Remove the float: left;

Since the navigation is the full width of the containing div, there is no need to mess with floats, the list items will line up with just display: inline;

回答2:

I tried something else that works... It seems to work better than trying to build in something custom thus far in my experience with Skeleton... Although it produces a bit less pretty markup for the HTML, the rigidity of the final result works for me. Here is my code so that you can see what I did to achieve the desired effect:

<div class="row"> <div class="two columns offset-by-three"> <a href="#" class="nav">Portfolio</a> </div> <div class="two columns"> <a href="#" class="nav">About</a> </div> <div class="two columns"> <a href="#" class="nav">Contact</a> </div> </div>

What you can see here is that the skeleton framework allows for the columns to operate naturally and restack at lower resolutions without any extra code. The only tricky part really is setting up the offset on the left most item.

回答3:

Have you tried nav.primary ul {text-align: center;} As well as keeping the left/right margins to auto, this worked for me when I was using the skeleton framework.

来源：https://stackoverflow.com/questions/21923409/centering-navigation-bar

标签

skeleton-css-boilerplate