margin-right 不适用于我的 HTML。如何将我的内容居中？

Question

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

这是问题所在：

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

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

这是图片：

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

Answer 1

发生这种情况是因为您没有正确设置主体的宽度。如果您指定边距，那么您会看到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;
}