Divs выровнять в родительском блоке

Question

#Menu
{
    position: relative;
    width: 90%;
    margin: 0 auto;
    height; 50px;
    min-height: 50px;
    padding: 5px;
}

И дочерние блоки:

#MenuItem
{
    position: relative;
    float: left;

    margin: 0 auto;
    margin-top: 2px;
    margin-left: 5px;
    margin-right: 5px;

    text-align: center;
    width: 142px;
    height: 37px;
}

И html:

    <div id="Menu">
        <div id="MenuItem"><span>Home</span></div>
        <div id="MenuItem"><span>Home</span></div>
        <div id="MenuItem"><span>Home</span></div>
    </div>

Как сделать так, чтобы MenuItem делений было центрировано горизонтально в родительском div?

Answer 1

<ul id="nav">
  <li><a href="/">Home</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/work/">Work</a></li>
  <li><a href="/clients/">Clients</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>

а вот и ксс

#nav{
  border:1px solid #ccc;
  border-width:1px 0;
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
}
#nav li{
  display:inline;
}
#nav a{
  display:inline-block;
  padding:10px;
}

Answer 2

Следующий код должен сделать это

#Menu
{
    position: relative;
    width: 90%;
    margin: 0 auto;
    height; 50px;
    min-height: 50px;
    padding: 5px;
    text-align: center; /* added this rule */
}

#MenuItem
{
    position: relative;
    display: inline-block;  /* changed from float:left */

    margin: 0 auto;
    margin-top: 2px;
    margin-left: 5px;
    margin-right: 5px;

    text-align: center;
    width: 142px;
    height: 37px;
}

Кроме того, я бы порекомендовал использовать

<ul id="Menu">
  <li>...</li>
  <li>...</li>
</ul>

вместо вложенных элементов div.