Css 中心div在100%宽度div内

我正在尝试Blueprint CSS框架，很难弄清楚如何进行总体布局

看起来Blueprint（据我目前所知）让您使用950px的设置页面宽度。我想你可以通过一些修改来改变它，但在任何情况下都必须有一些宽度，所以这很好。问题是，即使我希望页面的主要内容是950px宽，我也希望页眉和页脚100%宽

因此，我在950px宽的主“container”div外放置了一个页眉和一个页脚。我将标题div设置为100%。然后我在它里面有一个“headerContent”div（包含菜单、徽标等），它的宽度是950px（蓝图中的span-24）。但我希望headerContent div位于header div的中心

我一直使用“margin:0auto”技巧来实现这一点，但由于某些原因，它现在根本不起作用

以下是html：

            <div id="header" class="blueheader">

                <div id="headerContent" class="span-24">

                    <div id="logo" class="span-6">

                        <a href="/">

                            <img src="/images/expertinfo.png" width="230" height="62" />

                            </a>

                    </div>

                    <div id="menucontainer" class="span-14"><ul id="menu"><li>

<a href='/Services/Index'>TJ&#196;NSTER</a></li>

<li>

<a href='/About/References'>KUNDER</a></li>

<li>

<a href='/About'>OM OSS</a></li>

<li>

<a href='/About/Contact'>KONTAKT</a></li>

</ul></div>

                    <div id="logindisplay" class="span-2">

                            <a href="/Account/LogOn">Logga in</a>



                    </div>

                </div>

            </div>

溢出和缩放部分只是我读到的另一个技巧，它可以避免使用空div来清除包含的div，我尝试不使用它们，但没有运气，因此它们与问题无关

---

你知道我做错了什么吗？

你需要设置

#headerContent

的宽度，因为如果没有它，默认宽度为

width:100%

如果你将

950px

宽度放在div上，你应该没事。

找到了答案：你不应该在headerContent上使用span-24，显然是在Blueprint框架中，而是容器类。以下是有效的方法：

        <div id="header" class="blueheader">
            <div id="headerContent" class="container">
                <div id="logo" class="span-6">
                    <a href="@Url.Action("Index", "Home")">
                        <img src="/images/expertinfo.png" width="230" height="62" />
                        </a>
                </div>
                <div id="menucontainer" class="span-14">@Html.Raw(Html.Menu())</div>
                <div id="logindisplay" class="span-2">
                    @Html.Partial("_LogOnPartial")
                </div>
            </div>
        </div>

@Html.Raw（Html.Menu（））
@Html.Partial（“\u lognPartial”）

---

我不能说我完全理解为什么它以前不工作，这让我很担心，因为我正在尝试这个框架来简化布局，但这让我更难理解。据我所知，它也应该与第一个代码一起工作…

事实上，这不是问题所在，span-24类为它提供了950px的宽度。我提到它有这个，但忘了提到它来自哪里。这是蓝图框架的一部分。我找到了解决方案，不过，我很快就会发布它。

        <div id="header" class="blueheader">
            <div id="headerContent" class="container">
                <div id="logo" class="span-6">
                    <a href="@Url.Action("Index", "Home")">
                        <img src="/images/expertinfo.png" width="230" height="62" />
                        </a>
                </div>
                <div id="menucontainer" class="span-14">@Html.Raw(Html.Menu())</div>
                <div id="logindisplay" class="span-2">
                    @Html.Partial("_LogOnPartial")
                </div>
            </div>
        </div>