html - 如何通过包装将内容集中在网站上？

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 包装。

将宽度更改为：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元素实际上是 900 像素宽，而不是 960 像素。考虑到这一点，那个 div 实际上也是居中的。使它看起来不居中的原因是div.box-full元素的宽度为 1022px (960 + 30(padding-left) + 30(padding-right) + 2(border left and right)) = 1022。取宽度该.box-full元素并将其设置为898px，看看是否使它看起来正确！