是否可以使<article>及其内容保持在页面的中心？</article>

Question

是否可以将<article>及其内容保留在页面的中心？

这是我网站的链接： http://www.haloallure.co.nf

当您访问网站时，文章通常位于页面的中心，但在我的情况下，当文章的宽度与屏幕相同时，文章只会停留在中心。

即使我减小宽度，如何使页面的淡蓝色部分保持在中心？

Answer 1

给它一个宽度（小于100％），并将其边距设置为auto：

article {
    width: 800px;
    margin: auto;
}

默认情况下，<article>占用其包含元素的所有可用水平空间。这意味着它和父母一样宽（一般来说）。为了居中它，我们必须减小它的宽度，使它小于包含元素。在上面的示例中，我选择了800px，但您可以轻松使用em，rem或%值。

通过将margin设置为auto，我们要求浏览器为元素的边确定一组相等的边距值。反过来，浏览器确定将元素放在包含元素中间所需的内容。

您甚至可以考虑为不同的宽度赋予它不同的样式：

/* When the viewport is 600px+ wide, article is 500px */
@media ( min-width: 600px ) {
    article {
        width: 500px;
        margin: auto;
    }
}

/* When the viewport is 800px+ wide, article is 600px */
@media ( min-width: 800px ) {
    article {
        width: 600px;
    }
}