如何在我的div中将文本居中

Question

I need to center the text in the div, but I have no idea how to. If someone could please help me, that would be absolutely wonderful.

CSS

#nav    {
width: 425px;
height: 50px;
margin: 0 auto;
color: white;
font-size: 25px;
font-family: Mager;
}

#nav li {
list-style: none;
float: left;
}

#nav li:hover   {
opacity: .6;
}

HTML

<div id="nav">

<ul>
    <li>Home</li>
    <li>&nbsp;&nbsp;</li>
    <li>Soundcloud</li>
    <li>&nbsp;&nbsp;</li>
    <li>Facebook</li>
    <li>&nbsp;&nbsp;</li>
    <li>Contact</li>
</ul>   

Answer 1

Use the text-align property:

#nav li {
    list-style: none;
    float: left;
    text-align:center;
}

But note that you are using float:left , so unless you set a width, you won't actually see any centering.

Here's a jsFiddle demo

Answer 2

I have make a little fiddle you can see... http://jsfiddle.net/Azzamean/fjnuw/67/

HTML:

  <div id="menu">
     <header>
         <ul>
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">Sound Cloud</a>
            </li>
            <li><a href="#">Facebook</a>
            </li>
            <li><a href="#">Contact</a>
            </li>
        </ul>
    </header>
    </div>

And the CSS:

    ul {
    list-style-type: none;
    padding: 0;
    overflow:hidden;
 }
 a:link, a:visited {
    margin:0 auto;
    display:block;
    width: 120px;
    font-weight:bold;
    color:#FFFFFF;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
  }
  a:hover, a:active {
    background-color:#FFFFFF;
    color:#E80000;
  }
  li {
    display:inline-block;
   }
  #menu {
  background-color:#E80000;
  text-align:center;
  }