2

我知道我们通常使用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%;
}

演示

在这一点上，我把它article放在中心。但是，随着浏览器/窗口大小变小，我想将文章居中，就好像它的宽度与header. 基本上，在某些时候（当您缩小浏览器窗口时），header它将位于左侧的边缘，而不是利用右侧的空白空间。

我不想有额外的div，但如果我这样做了，我会将文章包装在 a 中div并给它一个自动边距。

截图 http://i3.minus.com/i2yPFqNDgeBbS.png

4

2 回答 2

0

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

margin-left: 15%;

在标题上？

于 2013-04-06T19:36:46.317 回答
0

这段代码做了描述的事情，但如果你想保持两条边对齐，你需要进入一些 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>
于 2013-04-06T21:48:07.013 回答