margin-right 不适用于我的 HTML。我怎样才能使我的内容居中？

Question

最近在学习 响应式设计。但是当屏幕变大时，我在将内容居中时遇到了一些麻烦。

这是问题所在：

 @media screen and (min-width: 950px) {
    body {
        margin: 10%;
    }
}

当我将保证金设置为 10% 时，只有 margin-top 和 margin-left 起作用。这不是我想要的。 margin-right 根本不起作用。

这是图片：

那么，我该如何解决这个问题？

原文由 edison xue 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

发生这种情况是因为您没有正确设置 body 的宽度。如果您指定边距，那么您会看到 margin-left 正在工作，并且它会将您的内容推到屏幕右侧。

您需要将宽度和边距加起来为 100%，因此通过在两侧提供 10% 的边距，您必须将宽度调整为 80%。

 @media screen and (min-width: 950px) {
    html {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    body{
        width: 80%;
        margin: 10%;
        padding: 0;
    }
}

此外，您不必总是调整计算。您还可以将它们设置为自动调整，如下所示：

 body {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

原文由 ab29007 发布，翻译遵循 CC BY-SA 3.0 许可协议