可変の幅と高さを持つ div 内の画像を垂直方向の中央に配置するための CSS スタイル

この記事では主に、可変幅と高さの div で画像を垂直方向にセンタリングするための CSS スタイルを紹介します。必要な友人はそれを参照できるように共有します。可変幅と高さで画像を垂直方向に中央揃えにする この場合、p で画像を垂直方向に中央揃えにする方法と CSS スタイルを記述する方法は?サンプルコードは次のとおりです

最も簡単な方法は、外側の要素の css 属性を設定することです:

p{ 
display: table-cell; 
}

ただし、IE6/7 はこの CSS スタイルをサポートしていません。互換性を持たせるために、次の方法を使用できます。 。

html の構造は次のとおりです。

<p><span></span><img src="test.png" alt=""></p>

CSS コードは次のとおりです。

p{ 
width: 100px; 
height: 100px; 
border: 1px solid #ccc; 
} 
span{ 
line-height: 100%; 
vertical-align: middle; 
display: inline-block; 
height: 100%; 
} 
img{ 
width: 100%; 
vertical-align: middle; 
}

上記の属性を設定することで、以下の図の効果を実現できます。

このメソッドの原理は、imgタグの前に空のspanタグを挿入し、それを使用してp内の行の高さを100%に拡張することです。
以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

高さが不明な画像の垂直方向のセンタリングを設定する方法

CSSバナー画像のレスポンシブセンタリング表示方法について

以上が可変の幅と高さを持つ div 内の画像を垂直方向の中央に配置するための CSS スタイルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。