CSS help: Navigation bar position: fixed; I also need to center

Question

Class project:

Trying to "anchor" my navigation bar so it stays at the top of the screen.

HTML

<nav><a href="index.html"><img src="images/home.jpg" alt="Home" width="120"
height="60" title="Home"></a> <a href="services.html"><img            src="images/services.jpg" alt="Services" width="120"
height="60" title="Services"></a> <a href="training.html"><img    src="images/training.jpg" alt="Training" width="120"
 height="60" title="Training"></a> <a href="about.html"><img      src="images/about.jpg" alt="About" width="120"
height="60" title="About"></a> <a href="media.html"><img src="images/media.jpg" alt="Media" width="120"
height="60" title="Media"></a> <a href="faq.html"><img src="images/faq.jpg"       alt="F.A.Q." width="120"
height="60" title="FAQ"></a> <a href="contact.html"><img   src="images/contact.jpg" alt="Contact" width="120"
height="60" title="Contact"></a></nav>

CSS nav{ position:fixed; }

I would post a screen shot by this is my first post and dont have the rep.

Answer 1

You can use a combination of display:inline-block and text-align:center to make the fixed positioned nav centered.

See the fiddle

HTML

<nav>
    <div> 
        <a href="#">HTML</a>
        <a href="#">CSS</a>  
        <a href="#">JavaScript</a>
        <a href="#">jQuery</a>
    </div>
</nav>

and the CSS

nav a {
    float:left;
}
nav {
    width:100%;
    position:fixed;
    text-align: center;
}
nav div {
    display: inline-block;
}