コンテナ内で Div を水平方向に中央に配置するにはどうすればよいですか?

コンテナ内の div の水平方向の配置

コンテナ内で div を水平方向に中央揃えにしようとすると、困難に直面する可能性があります。これは多くの場合、float: left のデフォルトの動作が原因です。

この問題に対処するには、div に float の代わりに display: inline-block を使用することを検討してください。この手法により、マージンを手動で計算する必要がなくなり、応答性の高い配置が可能になります。

たとえば、次の CSS では、

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

クラス "block" の div は、 inline 要素であり、クラス「row」を持つコンテナ div 内で水平方向に整列します。

さらに、ブロック div が 1 つだけある行 div がある場合は、text-align: center: を使用して中央に配置できます。

<code class="css">.row-with-single-block {
  text-align: center;
}</code>

以上がコンテナ内で Div を水平方向に中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。