cssを使用して垂直の中間に画像を配置するにはどうすればよいですか？

Question

私には1つの問題があります。

画像のサイズが異なります。

私は垂直の真ん中に配置する必要があります。

画像のリンクが動的に変更されます。

私はラインハイトを使いたくありません。

この問題を解決する最も一般的な方法はありますか？

Answer 1

CSS Flexboxを使用できます。あなたの親のフレックスコンテナ&に画像のalign-self: centerを使用してください。

.img-holder { 
 
    display: inline-flex; 
 
    background: black; 
 
} 
 

 
img { 
 
    align-self: center; 
 
    margin: 10px; 
 
}

<div class="img-holder"> 
 
    <img src="http://placehold.it/50x50" alt="image" /> 
 
    <img src="http://placehold.it/50x60" alt="image" /> 
 
    <img src="http://placehold.it/50x70" alt="image" /> 
 
    <img src="http://placehold.it/50x30" alt="image" /> 
 
    <img src="http://placehold.it/50x20" alt="image" /> 
 
</div>

この情報がお役に立てば幸い！