幅を設定せずに可変幅の Div ブロックを中央に配置するにはどうすればよいですか?

幅を設定せずに可変幅の Div ブロックを中央揃えにする

幅を知らずに div ブロックを中央揃えにするのは、困難な作業となる場合があります。この問題は通常、ブロック内の要素の数とサイズが変更される可能性がある動的コンテンツを扱うときに発生します。

解決策 1: Inline-Block と Text-Align を使用する

@bobince が推奨するアプローチの 1 つは、次の CSS スタイルを使用することです:

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

このシナリオでは、子 div にはインラインブロック表示プロパティが割り当てられ、親 div にはテキスト配置が中央に設定されます。これにより、子 div が親 div 内で浮動し、コンテンツに合わせて幅が自動的に調整されます。親 div を中央に配置することで、子 div はコンテナ内で効果的に中央に配置されます。

解決策 2: 相対位置を使用してネストされた Div

別の解決策には、親内で 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 は、パーセンテージベースの right プロパティを使用して浮動および配置されます。外側の div は親コンテナの中点に設定され、内側の div は中央揃えを実現するために自身の幅の半分だけオフセットされます。

以上が幅を設定せずに可変幅の Div ブロックを中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。