Center Navigation Menu Text

Question

I would need some help me! I work on something and I can't get it to work. :) I want the text align to the center. Here is the picture: http://imageshack.us/photo/my-images/266/sn54.jpg/

Can anyone give me some tip please? Thanks.

Here is the code what I use:

HTML:

<div id="container">
    <div id="header">
            <ul class="nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Protfolio</a></li>
                <li><a href="#">About Me</a></li>
                <li><a href="#">Contact Me</a></li>
            </ul>
    </div><!-- header end -->
   </div><!-- container end -->

CSS:

#header{
position: relative;
margin: 60px 0 0 0;
width: 100%;
height: 80px;}

.nav{
background: url(../images/navbar.png) no-repeat 0 0;
width:100%;
height:80px;
text-align:center;
display:block;}

.nav li{
float:left;
list-style: none;
margin: 10px;}

.nav li a{
width:150px;
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
display: block;
text-decoration: none;
color: #f0f0f0;
font-size: 1.6em;
margin: 0 .5em;}

.nav li a:hover {
margin-top: 2px;
background-color: #d0d5d6;}

Answer 1

An easy way of doing this is to add padding to your nav element on the right and left equal to with width of the ribbon sections.

.nav {
    padding:0 XXpx; /* XXpx = width of the ribbon ends */
}


.nav li {
    width:25%;
    text-align:center;
    margin:0;
}

As a basis, this should fix your problem. You may have to play around with the exact code to fit your needs based on margins, etc.

Alternatively, check out this tutorial on how to create this type of ribbon with just CSS and not rely on an image at all: http://css-tricks.com/snippets/css/ribbon/

Answer 2

Without knowing the dimensions of the background image its hard to be specific, but try putting the background on the header element rather than the nav. You can then set the width of the nav UL to the width of the inner part of the ribbon image and set a margin 0 auto on it to center it horizontally

Answer 3

I would wrap the ul with a div an this div has the background image. Than you can adjust the ul.