Menu Centralized

Question

I’m having many difficulties to align the text from my menu to the center, I’m now starting to learn how to develop websites.

Screenshot:

The code is like this:

<center>
<h1>Meu Site</h1>
 <div id="menu">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Informações</a></li>
        <li><a href="">Novidades</a></li>
        <li><a href="">Contato</a></li>
        <li><a href="">Staff</a></li>
    </ul>
   </div>
</center>

css:

    h1 {
        color:#00C
       }

    body {
        padding:0px;
        margin:auto;
        max-width: auto;
    }

    #menu ul {
        padding:0px;
        margin: 0 auto;
        float: left;
        width: 100%;
        background-color:#999;
        list-style:none;
        font:80% Tahoma;
        alignment-adjust:central;
        max-width: auto;
    }

    #menu ul li { 
        display: inline;
        width: 520px;
        }

    #menu ul li a {
        background-color:999;
        color: #333;
        text-decoration: none;
        border-bottom:3px solid #EDEDED;
        padding: 2px 10px;
        float:left;
    }

    #menu ul li a:hover {
        background-color:#D6D6D6;
        color: #6D6D6D;
        border-bottom:3px solid #EA0000;
    }

Answer 1

Like I said in the comment, use the tag center of html is a waste of time, totally unnecessary and other things.

We will organize all alignments by css. I’d rather not use ul li to make menu, recommend to you also not use, it is more to sort items and others.

In this example (which has its html as template) I used the tag nav which is especially for menu, making a lot of things easier. But enough talk and let’s go the solution.

The code is this:

h1 {
  text-align: center;
}
header,
nav {
  text-align: center;
  background: #999;
  margin: 20px 0;
  padding: 10px;
}
nav a {
  text-decoration: none;
  border-radius: 5px;
  color: black;
  padding: 3px 8px;
}
nav a:hover {
  text-decoration: none;
  border-radius: 1px;
  color: black;
  padding: 3px 8px;
  background-color: #D6D6D6;
  border-bottom: 3px solid #EA0000;
}

<h1>Meu Site</h1>
<nav role='navigation'>
  <a href="#0">Home</a>
  <a href="#0">Informações</a>
  <a href="#0">Novidade</a>
  <a href="#0">Contato</a>
</nav>

The centralization of an element block is done by defining your margin-left and margin-right as auto (the element must have a defined width, otherwise its width would be 100% and would not need centralization).

Basically that’s it, I hope that’s what you’ve been wanting ;)

Answer 2

You can do as follows below:

h1 {
  color:#00C;
  text-align: center;
}

body {
  padding:0px;
  margin:auto;
  max-width: auto;
}

#menu {
  width: 100%;
  height: 30px;
  background-color: #999;
}

#menu ul {
  padding: 0px;
  margin: 0 auto;
  width: 500px;
  height: 30px;
  list-style: none;
  font: 80% Tahoma;
  alignment-adjust: central;
  max-width: auto;
  display: block;
  background-color: #777;
}

#menu ul li { 
  display: inline;
  width: 520px;
}

#menu ul li a {
  background-color:999;
  color: #333;
  text-decoration: none;
  border-bottom:3px solid #EDEDED;
  padding: 2px 10px;
  float:left;
}

#menu ul li a:hover {
  background-color:#D6D6D6;
  color: #6D6D6D;
  border-bottom:3px solid #EA0000;
}

<h1>Meu Site</h1>

<div id="menu">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Informações</a></li>
    <li><a href="">Novidades</a></li>
    <li><a href="">Contato</a></li>
    <li><a href="">Staff</a></li>
  </ul>
</div>

Note: Avoid using the tag <center>, because this tag is obsolete, and no longer belongs to the specification of the HTML5. An option to override the use of this tag would be to use the property text-align:center; of css.