CSS で「display: inline-block」のみを使用してブロック要素を中央に配置するにはどうすればよいですか?

CSS のインライン ブロックを使用した中央揃え表示

指定されたコードでは、text-align: center を使用して本文テキストが中央に揃えられます。 。 .wrap クラスは、以前は位置合わせに display: table を使用していましたが、現在は display: inline-block を使用しています。これにより、表のような表示を使用する場合と比較して、より柔軟なレイアウトが可能になります。

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

これらの変更により、.wrap 要素はページの中央への配置を維持しながら、その中のコンテンツが流れるようになります。当然、インライン テキストの一部であるかのようになります。このアプローチにより、追加の display: table ルールが不要になり、より合理化された汎用性の高い CSS コードが得られます。

以上がCSS で「display: inline-block」のみを使用してブロック要素を中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。