私の div が、含まれている div 内で水平方向に中央に配置されないのはなぜですか?

水平方向の DIV 配置の中央揃え

含まれる div 内で div が水平方向に配置できないという問題が発生しました。一般的なクエリと解決策は次のとおりです:

質問

なぜ div が含まれる div 内で水平方向に中央揃えにならないのですか?

HTML の例:

<code class="html"><div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div></code>

例CSS:

<code class="css">.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  float: left;
}</code>

解決策

水平方向の中央揃えを実現するには、float の代わりに display: inline-block の使用を検討してください。このメソッドにより、幅や高さなどのブロックレベルのプロパティを維持しながら、div がインライン要素のように動作できるようになります。

更新された CSS:

<code class="css">.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  display: inline-block;
}</code>

この変更により、div は、 div.

を含む

以上が私の div が、含まれている div 内で水平方向に中央に配置されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。