如何使动态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/ - 它是如何用960px宽度定义的？

Answer 1

您需要将#one和#two都包含在包含元素中。那应该设置宽度。然后，您需要做的就是删除所有float（在#one，#two和#two的孩子身上）。的 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（或具有宽度的父级）的中心。

Answer 2

通过简单地给它一个display: table值

来居中动态div

DEMO http://jsfiddle.net/kevinPHPkevin/sE8Sc/20/

#two {
    text-align:center;
    display: table;
    margin: 0 auto;
}