CSSを使用してアンカー内の画像を垂直に配置する 質問する

CSSを使用してアンカー内の画像を垂直に配置する 質問する

次のように、アンカー要素内の画像を垂直方向に揃えたいと思います。

<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

実例

おすすめ記事