-1

私が取り組んでいる Web サイトがあります。すべてのコンテンツを中央に配置するのに苦労しています。ヘッダーが中央に表示されないのはなぜですか?

margin-left and 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--->

しかし、それは右に押しています。

4

2 に答える 2

0

の幅を 960px に指定しました.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;
}
于 2013-03-14T02:47:49.543 に答える
0

あなたのサイトでは、div#wrap要素の実際の幅は 960px ではなく 900px です。それを考慮して、THAT divも実際には中央に配置されています。中央に配置されていないように見えるのは、div.box-full要素の幅が 1022 ピクセル (960 + 30 (左パディング) + 30 (右パディング) + 2 (左と右の境界)) = 1022であるという事実です。その.box-full要素を898pxに設定して、正しく表示されるかどうかを確認してください!

于 2013-03-14T02:54:21.240 に答える