html - 如何使动态 div 居中？

Question

我不确定这个问题是否已经得到解答(我想可能已经得到解答)，但是您如何使这个动态 div 居中？

(我希望 #two 将自身对齐到 #one 的中间位置。)

现在我的 jsFiddle 这样做:http://jsfiddle.net/sE8Sc/4/

HTML :

<div id="one">
</div>
<div id="two">
        <a class="stuff">a</a>
        <a class="stuff">b</a>
        <a class="stuff">c</a>
</div>

CSS:

#one { width:100%; height:200px; background-color:#222; float:left; }
#two { text-align:center; float:left; }
.stuff { width:20px; height:20px; background-color:#444; margin:0 5px; float:left; }

我试过了 margin:0 auto; , text-align:center;但仍然没有骰子。我不打算声明定义的 margin喜欢margin:0 41%;因为如果我想添加另一个 <a class="stuff">到列表它会失去位置......

有人吗？这可能是一些我无法弄清楚的简单定位错误。

编辑:我环顾四周，看到了 Nivo Slider 的这个演示 -- http://demo.dev7studios.com/nivo-slider/ -- 它如何用 960 像素的宽度定义自己？

Answer 1

您需要将 #one 和 #two 包裹在一个包含元素中。那应该设置宽度。然后你需要做的就是删除所有的float(在#one、#two 和#two 上)的 child )。 <强> JSFiddle

#wrapper { width:500px; }
#two { text-align:center;}
.stuff { width:20px; height:20px; background-color:#444; margin:0 5px; }

新标记。

<div id="wrapper">
    <div id="one"></div>
    <div id="two">
            <a class="stuff">a</a>
            <a class="stuff">b</a>
            <a class="stuff">c</a>
    </div>
</div>

如果没有包装器，两个将仅与您的 window(或具有宽度的父级)的中心对齐。