Use Margin Auto and Center to center Float Left Div

Question

I know this question has been asked many times.

Center the div

However, I follow their suggestion:

<center> <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 )}

With the help of "Center" and "Margin Auto", "Text Align Center" ... I still can not center the menu item.

Answer 1

use the inline block instead of the float on the 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> 

Answer 2

Why not use an unordered list? In the end, you create 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; } 

Answer 3

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

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

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

Answer 4

Work for me (no float used, 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; } ab { border: 2px solid blue; } ac { border: 2px solid green; } ad { border: 2px solid black; } ae { border: 2px solid yellow; }