画像を Div 内で垂直方向と水平方向の両方で中央に配置するにはどうすればよいですか?

コンテナ Div 内で画像を垂直方向と水平方向に中央に配置する

より大きな div 内に画像を正確に配置したい場合、垂直方向と水平方向の両方を実現します。水平方向の配置には課題が生じる可能性があります。これを実現する方法は次のとおりです:

水平方向の配置:

div 内で画像を水平方向に中央揃えにするには、親 div に適用される CSS の text-align: center プロパティを利用します。これにより、画像を含む div 内のすべてのコンテンツが中央に配置されます。

垂直方向の配置:

垂直方向の配置を実現するには、別のアプローチが必要です。効果的な手法の 1 つは、絶対配置の使用です。

• 画像の位置を絶対に設定し、最も近い位置にある祖先 (この場合は親 div) を基準にして絶対的に配置されていることを示します。
• マージンの適用: 自動;自動余白設定を有効にすると、利用可能なスペース内で画像が中央に配置されます。
• 上、左、右、下を 0 に設定すると、画像が親 div の高さと幅全体を確実にカバーします。

CSS の例:

img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

を介して水平方向の配置を組み合わせることで、 text-align: マージン付きの絶対位置を使用して中央揃えと垂直揃えを行うと、より大きな境界 div 内の画像を効果的に中央揃えにすることができます。

以上が画像を Div 内で垂直方向と水平方向の両方で中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。