BinaryDevelop
  1. ホーム
  2. html

[解決済み] CSS "margin: 0 auto" が中央揃えにならない

2022-01-31 23:33:32

質問

さて、このトピックが取り上げられていることは理解しています。しかし、私は様々な解決策を検討しましたが、ほとんど成功しませんでした。

なぜこの 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/

解決方法は？

正常に動作しています。

問題なのは div は、デフォルトではブロックレベル要素であるため、親要素の幅を100%占有しています ( body この場合）。つまり、水平方向に移動するスペースはなく、したがって中央揃えするスペースもないのです。

図解はこちらをご覧ください 修正版デモ の周りにボーダーが追加されています。 .container .

の幅を小さくすると .container をクリックすると、センタリングが効くのがわかります。次に 修正デモ と width: 50% に適用されます。 .container .

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します