Text-Align:Center を使用したインラインブロックは、Display:Table を水平方向の中央揃えに置き換えることはできますか?

インライン ブロックを使用した中央表示: 代替ソリューション

ラップを使用して要素を水平方向に中央に配置する場合、一般的なアプローチは、ラッパーに display: table を使用することです。ただし、display: block または display: inline-block を利用したソリューションを好む人もいるかもしれません。

最初のソリューションでは問題が発生しました。目的の位置合わせを実現するには、display: table を「ラップ」する必要がありました。 text-align: center を body 要素に適用し、display: inline-block をラップに割り当てて、変更されたアプローチが登場しました。 display: table を削除することで、固定幅の制限を課すことなく要素を効果的に中央に配置する代替ソリューションに到達します。

更新されたコード:

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

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

この変更望ましい調整を維持しながら、特定のシナリオに対してよりクリーンで潜在的に好ましいアプローチを提供します。

以上がText-Align:Center を使用したインラインブロックは、Display:Table を水平方向の中央揃えに置き換えることはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。