使用Margin Auto和Center将Float Left Div居中

Question

我知道这个问题已被多次询问过.

将div与中心对齐

但是,我遵循他们的建议:

<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>

替代文字http://sites.google.com/site/yanchengcheok/Home/a.png

通过使用"中心"和"边距自动","文本对齐中心"...我仍然无法使菜单项居中.

Answer 1

使用内联块而不是向左浮动.

<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

为什么不使用无序列表？毕竟,您正在创建链接列表.

<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;
}