動的に生成されたコンテンツで Div ブロックを中央に配置するにはどうすればよいですか?

動的サイズの Div ブロックの中央揃え

問題:

なしで div ブロックを中央揃えにするその幅を事前に知るのは難しい場合があります。従来の方法は固定幅に依存しており、コンテンツが動的に生成される場合には実現できません。

解決策 1 (推奨): インライン ブロックのアプローチ

インライン ブロックの利用block プロパティと text-align プロパティを使用すると、親コンテナ内の要素を中央に配置できます。

.child {
  display: inline-block;
}
.parent {
  text-align: center;
}

この方法では中央に配置されます。独自の幅に基づいて子要素を作成し、動的コンテンツに応答できるようにします。

解決策 2: ネストされた相対配置

このメソッドは、相対配置でネストされた div を使用します。

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div class="clear"></div>
</div>

.outer-center {
    float: right;
    right: 50%;
    position: relative;
}
.inner-center {
    float: right;
    right: -50%;
    position: relative;
}
.clear {
    clear: both;
}

外側の div は右から 50% の位置にあり、 inner div は右から -50% に配置され、コンテンツが効果的に中央に配置されます。

以上が動的に生成されたコンテンツで Div ブロックを中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。