CSSを使用して、コンテナ<li>
ブロック内の一部の画像を垂直方向に中央揃えにする必要がありますが、その方法がわかりません。javascriptを使用して画像の高さを計算し、次にマージンを使用して画像を垂直方向に中央に配置するための計算を行うことができますが、それは不格好で愚かなようです。
固定マージン(画像の高さは可変)を使用せずに垂直方向の配置を実現するための優れたCSSベースのソリューションはありますか?
コンテナのli要素の上部に貼り付けられている画像:
CSSを使用して、コンテナ<li>
ブロック内の一部の画像を垂直方向に中央揃えにする必要がありますが、その方法がわかりません。javascriptを使用して画像の高さを計算し、次にマージンを使用して画像を垂直方向に中央に配置するための計算を行うことができますが、それは不格好で愚かなようです。
固定マージン(画像の高さは可変)を使用せずに垂直方向の配置を実現するための優れたCSSベースのソリューションはありますか?
コンテナのli要素の上部に貼り付けられている画像:
このcssプロパティを使用できます。
display: table-cell; vertical-align: middle;
このデモのように:jsfiddle.net/ongisnade/P94YE/
これで問題が解決する可能性があります。
vertical-align: middle;
Fredy の答えは最新のブラウザーでは正しいですが、8 より前の IE では機能しません。その他の手法: http://phrogz.net/css/vertical-align/index.html
これは私がいつも使っているものです..
vertical-align: middle;