web-dev-qa-db-ja.com

CSSの「マージン：0自動」が中央揃えにならない

わかりました、このトピックはカバーされています。しかし、私はさまざまな解決策を見てきましたが、それらでほとんど成功していません。

この_margin: 0 auto;_が機能しない理由はわかりません。 width: calc(33% - 40px);を使用してパディングを補正しようとしましたが、これは機能しませんでした。

なぜこれが起こっているのか、解決策があれば助けてください！

_.container {
  margin: 0 auto;
}

[class*='col-'] {
  float: left;
}

.col-2-3 {
  width: 66.66%;
}

.col-1-3 {
  width: 33.33%;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

.col-Word {
  width: auto;
  height: auto;
  padding: 25px;
  border: 5px #000 solid;
  border-left: 0px;
  border-right: 0px;
  background-color: #A7F4F6;
  font-size: xx-large;
  text-align: center;
}_
_<div class='container'>
  <div class="grid">
    <div class='grid'>
      <div class="col-1-3">
        <p class='col-Word'>T</p>
        <p class='col-Word'>V</p>
      </div>
    </div>

    <div class='grid'>
      <div class='col-1-3'>
        <div class='letter'>W</div>
      </div>
      <div class='col-1-3'>
        <div class='letter'>P</div>
      </div>
      <div class='col-1-3'>
        <div class='letter'>V</div>
      </div>
    </div>
  </div>
</div>_

https://jsfiddle.net/xm2gvzbf/5/

htmlcsscentering
7
JP Foster

動いています。

問題は、divを中央に配置することです。これは、デフォルトではブロックレベルの要素であり、そのため、親（この場合はbody）の100％の幅を占めます。つまり、水平方向に移動するスペースがないため、中央に移動するスペースがありません。

図については、この revised demo を参照してください。これには、.containerの周囲に境界線が追加されています。

.containerの幅を狭くすると、中央揃えの作業が表示されます。次に、2番目の 改訂されたデモ をwidth: 50%を.containerに適用したものを示します。

6
Michael_B

Margin：autoを機能させるには、divの幅を指定する必要があります。パーセンテージで幅を使用して、divも同様に応答できるようにしてください。

1
Leo The Four

実際には機能しますが、幅を指定しないと100％になります。次のようなものを試してください：

   .container {
    margin: 0 auto;
    width:50%;
    }

これが役立つことを願って

1
Alexander Bell

.containerを機能させるには、margin: 0 auto;に幅を設定する必要があります。 更新されたJSfiddle を参照してください。

0
Roy