Use Margin Auto and Center to center Float Left Div
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">