问题是在容器中水平居中元素

Question

我正努力让我的6个圆圈水平居中到页面中间。 我尝试将它们放在.middle DIV display: block和自动边距但没有成功 - 看起来它们与.middle的左侧对齐

http://jsfiddle.net/376wC/

非常感谢你的帮助

.middle {
    width: 980px;
    height: 600px;;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background: #ccc;
}

Answer 1

jsFiddle Demo

这是必要的更改：

.middle {
    width: 780px;
}

Answer 2

您可以使用inline-block，您需要调整圆圈+边距的大小，以便只有3个适合行。所以在我的例子中，圆圈的宽度和宽度都是10px，每个圆圈之间有4个额外的像素：

http://jsfiddle.net/376wC/5/

此外，你可以摆脱circle_5px_marging类，只是在圆圈上放置相等的左右边距（参见我的例子）。