固定幅を持たずに Div コンテナを中央に配置するにはどうすればよいですか?

固定幅を持たない Div コンテナの中央揃え

幅が不明な場合、「products」 div ブロックを中央揃えにするという課題に直面します。この動的コンテンツ配置のジレンマに対する解決策は次のとおりです。

このアプローチは、2 つの div コンテナーの組み合わせに依存しています。クラス「product_container」を持つ外側の div は、親コンテナーとして機能します。この親コンテナ内で、クラス「product」を割り当てた内部 div をネストします。この内部 div には、実際の製品コンテンツが格納されます。

内部 div を親コンテナの中央に配置するために、フローティングおよび相対配置テクニックを備えた CSS を使用します。内訳は次のとおりです。

• 外側の div「product_container」には「float: right」が与えられ、「right: 50%;」を使用して右端から 50% の位置に配置されます。
• 内部 div の "products" も "float: right" ですが、"right: -50%;" を使用して自身の幅の半分だけ反対方向に配置されます。

この微妙な配置により、製品コンテンツの幅に関係なく、内部 div が親コンテナー内の中央に配置されることが保証されます。

この手法をデモンストレーションするにはで、次の HTML マークアップを考えてみましょう:

<div class="product_container">
  <div class="outer-center">
    <div class="product inner-center">
      <!-- Product content goes here -->
    </div>
  </div>
  <div class="clear"></div>
</div>

この HTML には次の CSS が付属しています:

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

このネストされた div アプローチと正確な CSS 配置を活用することで、" を効果的に中央に配置できます。 「products」の div ブロックは、幅が不明な場合でも、適切に配置されたコンテンツ表示を保証します。

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