html - ページの内容を中央揃え

Question

#mainこれまで、ページの div を中央揃えにしようとしてきましたが、うまくいきませんでした。

問題のページは一般的なページです。

divにcssmargin: 0px auto;を当てはめてみましたが#main、中央揃えにできませんでした。

大画面でコンテンツを中央揃えにしたかったのですが、フローティングメニューバーは同じにしたかったのです。これを達成するために誰かが私を助けることができますか? 迷っています。

score 2 · Accepted Answer

これを追加するだけです：

#main {
      margin: 0 auto;
      width: 600px;
      background-color: #EEEEEE;
      text-align: center;
}

とても簡単なHTML例:

<div id="main">
    <span>Simply dummy text</span>
    <span>Simply dummy text</span>
    <span>Simply dummy text</span>
</div>

width: 100%親要素ではなく、中央に配置する要素の幅を定義する必要があるため、できません。

編集：

ここでデモを作成しましたjsFiddle.net

score 1 · Accepted Answer

幅を設定しない限り、margins の値 auto は効果がありません。その結果、div#main の幅を設定する必要があります。

このデモのパーブルボックスを見てください。

score 1 · Accepted Answer

まず、HTML に問題があります。1 つのページでID ( main) を 2 回適用しました。ID は一意です。つまり、ページごとに 1 回しか使用できません。クラスは好きなだけ使えます。

#main {
  width: 1320px;
  margin: 0 auto;
}

.right {
  width: 200px;
}

.bigpic {
  width: 540px;
  /** and  remove max-width **/
}

そして、その 2 番目の ID を削除することを忘れないでください。#main-wrapper(残念なネーミング)の最初の子にあります。

3 に答える 3