0

我不确定这个问题是否已经得到解答（我想它可能已经回答了），但是你如何使这个动态 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 宽度定义自己的？

居中的 div

4

2 回答 2

2

您需要将两者都包装#one在#two一个包含元素中。那应该设置宽度。然后你需要做的就是删除所有的floats （在#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（或具有宽度的父级）的中心对齐。

于 2013-08-14T18:21:33.033 回答
0

您通过给动态 div 一个display: table值来居中

演示http://jsfiddle.net/kevinPHPkevin/sE8Sc/20/

#two {
    text-align:center;
    display: table;
    margin: 0 auto;
}
于 2013-08-14T18:42:41.770 回答