Use Margin Auto and Center to center Float Left Div

I know this question had been asked many times.

Align a div to center

However, I follow their suggestion :

<cen开发者_如何学JAVAter>
  <div style="margin : auto; text-align: center">
    <a href="#" style="float: left; margin-right: 10px;">Menu Item 1</a>
    <a href="#" style="float: left; margin-right: 10px;">Menu Item 2</a>
    <a href="#" style="float: left; margin-right: 10px;">Menu Item 3</a>
  </div>
</center>

_{(source: google.com)}

By using "Center" and "Margin Auto", "Text Align Center" ... I still unable to center the menu item.

---

use inline-block instead of float left.

<center>
  <div style="margin : auto; text-align: center">
    <a href="#" style="display: -moz-inline-box; display: inline-block; left; margin-right: 10px;">Menu Item 1</a>
    <a href="#" style="display: -moz-inline-box; display: inline-block; margin-right: 10px;">Menu Item 2</a>
    <a href="#" style="display: -moz-inline-box; display: inline-block; margin-right: 10px;">Menu Item 3</a>
  </div>
</center>

---

Why not use an unordered list? After all, you are creating a list of links.

<ul>
 <li><a href="#">Menu Item 1</a></li>
 <li><a href="#">Menu Item 2</a></li>
 <li><a href="#">Menu Item 3</a></li>
</ul>

li {
  display: inline;
}

ul {
  width: 50%;
  margin: 0 auto;
}

---

Your code works fine, but the div is 100% wide by default so you won't notice any centering.

Either give the div a width (fixed in pixels or relative in percent) or, if you just want to center the menu items, give the div a text-align setting:

<div style="margin : auto; text-align: center">

---

Work for me (not used float, only text-align): http://jsfiddle.net/vnAvk/20/

<div class="a">
    <p>A div Hello</p>
    <p class="center">
        <a class="b">B Div hello</a>
        <a class="c">C Div Hello</a>
        <a class="d">D div Hello</a>
        <a class="e">E div Hello</a>
    </p>
</div>

div.a { border: 1px solid red;} 
p.center { text-align: center; }

a.b { border: 2px solid blue; } 
a.c { border: 2px solid green; } 
a.d { border: 2px solid black; } 
a.e { border: 2px solid yellow; }