次のように、アンカー要素内の画像を垂直方向に揃えたいと思います。
<ul class="thumbnails">
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://www.forodefotos.com/attachments/barcos/17639d1298388532-barcos-vapor-antiguos-barcos-antiguos-vapor-mercantes.jpg" style="max-height: 150px">
</a>
</li>
</ul>
多くの投稿を読みましたが、どれもうまくいきませんでした。また、Bootstrap サムネイル クラスも使用していますが、これが関連しているかどうか、またそれが機能しない理由かどうかはわかりません。
行の高さを設定することでそれができると読みましたが、何かが間違っています。
シンプルなプランカーをご覧ください。
http://plnkr.co/edit/DsQ80oEiHFn4ma4qfNW8
アップデート:プランカーを更新しました。テキストの垂直方向の配置は正常に機能していますが、画像ではまだ機能しません。
ベストアンサー1
これを試して:
.thumbnail {
line-height: 150px; // height taken from OPs plunker
}
.thumbnail img {
margin: auto;
vertical-align: middle;
display: inline-block;
}
親アンカー要素に を追加しdisplay: inline-block;
て設定し、画像を垂直方向に中央揃えにします。line-height