html - 在容器中水平居中元素的问题

Question

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

非常感谢您的帮助

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

score 1 · Accepted Answer

1

这是所需的更改：

.middle {
    width: 780px;
}

于 2013-09-07T15:06:51.453 回答

score 1 · Accepted Answer

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

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

2 回答 2