Question

我知道我们通常使用margin:auto，但我使用的是以下代码。

HTML：

<article>
  <header></header>
</article>

CSS：

article{
  max-width: 500px;
  margin: auto; /* goes in the middle - great */
}
header{
  width: 130%;
  margin-left: -30%;
}

Demo

此时我将article置于中心位置。但是，随着浏览器/窗口大小变小，我希望将文章的中心放在宽度与header一样宽的位置。基本上，在某些时候（缩小浏览器窗口时），header将位于左侧边缘，而不利用右侧的空白区域。

我不想要额外div，但如果我这样做，我会将文章包装在div中并给它一个自动保证金。

screenshot http://i3.minus.com/i2yPFqNDgeBbS.png

Answer 1

也许我误解了一些事情，但你不是只想要：

margin-left: 15%;

标题上的

？

Answer 2

这段代码完成了所描述的内容，但是如果你想保持两条边对齐，你需要进入一些javascript，我推荐jquery用于这种事情。

<html>
    <head>
        <title></title>
        <style>
            html, body {
                width: 100%;
                text-align: center;
            }
            .header {
                width: 960px;
                margin-left: auto;
                margin-right: auto;
                position: relative;
                left: -100px;

                background-color: blue;
            }
            .article {
                width: 75%;
                margin-left: auto;
                margin-right: auto;

                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="header">Header</div>
        <div class="article">TODO write content</div>
    </body>
</html>

是否有另一种方法可以将元素置于页面中间

2 个答案: