ホームページ > ウェブフロントエンド > CSSチュートリアル > 動的に生成されたコンテンツで Div ブロックを中央に配置するにはどうすればよいですか?

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

Barbara Streisand
リリース: 2024-11-24 03:20:17
オリジナル
957 人が閲覧しました

How to Center a Div Block with Dynamically Generated Content?

動的サイズの 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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート