Question

我知道这个问题曾多次被问过。

但是，我遵循他们的建议：

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

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

Answer 3

您的代码运行正常，但div默认为100％宽，因此您不会注意到任何居中。

为div提供宽度（以像素为单位或以百分比表示的相对值），或者，如果您只想将菜单项目置于中心位置，请为div设置text-align设定：

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

Answer 4

为我工作（不使用float，只有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; }

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

4 个答案: