包裹元素和内部元素如何水平居中对齐

Question

这是我的HTML代码的样子。

<div style="width:70%; margin:0px auto; border:1px solid #000;">

<div style="float:left; width:100px; border:1px solid #000;">Test</div>
<div style="float:left; border:1px solid #000;">Test</div>

</div>

输出结果如下所示。 http://imm.io/7PWG 正如您所看到的，包装器div位于浏览器的中心，但两个内部div在左侧。我希望它们位于包装器div的中心。

有什么方法可以做到这一点吗？请帮帮我。谢谢。

- spotlightsnap

---

这不会解决你的对齐问题，但我认为你需要在两个内部div后面添加一个“清除div”，以便div边框显示在内部div周围：<div style="overflow:hidden; clear:both; height:0;"></div> - Curtis

Answer 1

display: inline-block可以以相对简单的方式实现此功能：

<div style="width:70%; margin:0px auto; border:1px solid #000; overflow:hidden; text-align:center">
    <div style="display:inline-block; vertical-align:top; text-align:left">
        <div style="float:left; width:100px; border:1px solid #000;">Test</div>
        <div style="float:left; border:1px solid #000;">Test</div>
    </div>
</div>

参见: http://jsfiddle.net/LJaDd/

• 我在你内部的两个
  标签外包了一个新的

  标签，并给它添加了display:inline-block。
• 我向外部
  标签添加了text-align:center，以使包装

  标签居中，然后向包装

  标签添加了text-align:left，以将其内部文本对齐回左侧。
• 我向外部
  标签添加了overflow:hidden，以使其包含浮动的

  标签。

- thirtydot

---

谢谢，它在IE以外的浏览器上运行良好，似乎inline-block不支持跨浏览器工作？ - spotlightsnap

它只在IE6/7中适用于自然的内联元素，但幸运的是很容易修复，请参见此处。这里是我回答中已修复并在IE6/7中工作的演示版本：http://jsfiddle.net/LJaDd/1/。 - thirtydot

Answer 2

我认为这会很有帮助：http://www.pmob.co.uk/pob/centred-float.htm。

- lamelas

Answer 3

试一试...

<div style="width:70%; margin:0px auto; border:1px solid #000; background-color: yellow;">
    <div>
        <div style="float:left;width:100px; border:1px solid #000;">Test</div>
        <div style="float:left;border:1px solid #000;">Test</div>
    </div>
</div>

float:left会导致你的内部两个div向左移动并且无法居中。将它们放入另一个div中即可解决问题。

这是实际效果...http://jsfiddle.net/sixgun/mp3T2/

- Antony Scott