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的中心。

有什么办法吗？请帮帮我。感谢。

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/

我在你的内部两个div周围包裹了一个新的div，然后给了它display: inline-block。
我将text-align: center添加到外部div以使包装器div居中，然后将text-align: left添加到包装器div以将内部对齐的文本对齐左边。
我将overflow: hidden添加到外部div，以便contains the floated divs。

Answer 2

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

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导致你的内部2个div一直向左移动而不是居中。将那些放在另一个修复它的div中。

这里正在行动...... http://jsfiddle.net/sixgun/mp3T2/

Wrapper Div和Inner Div中心对齐

3 个答案: