如何通过包装来集中网站上的内容？

Question

我有一个网站，我正在努力将我的所有内容集中在一起。为什么头部中心不会？

我尝试了通常的margin-left和right方法：auto;但它没有用，所以我用以下方法做了以下事情：

<div class="header-wrapper">

  <div id="wrap">
    <!---start wrap 960px--->

    <h1>TITLE</h1>

    <div class="box-full">

      <h2>Our Cloud Development</h2>
      <p>Welcome to company Feel free to follow us on twitter. We are a new company, focused on business development.</p>
      <div class="button">
        <a href="class=" learnmore ">Learn More</a>
    </div>

    </div>
    </div>
    </div> <!---end wrap 960px--->

但它正在向右推进。

Answer 1

您为.box-full <div>指定了960px的宽度。因为您还指定了填充，所以您将超出该960px包装器。

将宽度更改为：960-30-30 = 900：

.box-full {
    background: none repeat scroll 0 0 #F2F2F2;
    border: 1px solid #CCCCCC;
    border-radius: 7px 7px 7px 7px;
    clear: both;
    left: 0;
    margin: 1cm auto 0;
    padding: 30px;
    position: relative;
    text-align: center;
    width: 900px;
}

Answer 2

在您的网站上，div#wrap元素实际上是900px宽，而不是960px。考虑到这一点，那个div实际上也是中心的。使它看起来不居中的事实是，div.box-full元素是1022px宽（960 + 30（填充左）+30（填充右）+2（左右边框））= 1022.取宽度那个.box-full元素，并将其设置为898px，看看是否使它看起来正确！