子要素を親 `` の中央に配置するにはどうすればよいですか?

内の要素を中央揃えにする要素

CSS プロパティ left: 50% を使用すると、要素は直接の親要素ではなく、ビューポート全体に対して中央に配置されます。子要素を親要素内で中央揃えにするには、text-align と margin を組み合わせて使用​​します。

コンテンツを水平方向に中央揃えにするには、親要素の text-align プロパティを center に設定します。次に、margin: auto; を適用します。子要素に。これにより、すべての辺の余白が自動的に調整され、要素が親内で中央に配置されるようになります。

例:

#parent {
    text-align: center;
}

.child {
    margin: auto;
}

この例では、#parent div はビューポート内で水平方向の中央に配置され、.child div は #parent 内で水平方向の中央に配置されます。 div.

追加メモ:

• マージンの使用: auto;要素を水平方向に中央揃えにするだけです。水平方向と垂直方向の両方で中央揃えにしたい場合は、margin: auto auto; を設定する必要があります。
• 子要素の幅が親要素よりも広い場合、親要素の境界を越えて拡張されます。この場合、子要素の width プロパティを親要素内に収まる小さい値に設定することが最善です。

以上が子要素を親 `` の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。