幅を知らずに Div ブロックを中央に配置するにはどうすればよいですか?

幅の制約なしで Div ブロックを中央に配置する

幅を知らずに div ブロックを中央に配置するのは難しい場合があります。この記事では、2 つの効果的な解決策を提供することでこの問題に対処します。

解決策 1: インライン ブロックとテキスト配置

この解決策には、アイテムが表示として中央に配置されるように設定することが含まれます。 : inline-block とその親コン​​テナー (text-align: center)。このアプローチは、ブラウザーによるインライン ブロック要素の処理方法に依存します。

CSS:

.child {
  display: inline-block;
}

.parent {
  text-align: center;
}

解決策 2: 相対配置

このソリューションでは、相対位置を使用してコンテンツを中央に配置します。これには、外側の div と内側の div の 2 つの div 内で中央に配置されたコンテンツをラップすることが含まれます。

HTML:

<div>

CSS:

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

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

.clear {
  clear: both;
}

外側の div は次のとおりです。右にフローティングされ、その右端は親の端から 50% の位置にあります。内側の div も右にフローティングされますが、その右端は外側の div の右端から -50% の位置にあり、効果的に内側の div とそのコンテンツが親 div 内の中央に配置されます。

結論

どちらのソリューションも、事前に幅を知らなくても div ブロックを中央に配置する効果的な方法を提供します。どのソリューションを使用するかは、プロジェクトの特定の要件と制約によって異なります。

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