CSS div要素内の画像を中央に表示させるにはどうしたら良いでしょうか？

Question

各div class="box"の中で画像に対し文字を回り込ませ中央に表示していますが、下記コードだとdivに対して画像が左上に表示されてしまいます。最下部の添付画像のように画像も文字同様にdivに対し縦中央に表示する場合どうすればいいでしょうか？

<div class="box">
<div class="box-img"><img alt="" src="http://www..png"></div>
<div class="box-text">テスト</div>
<a class="productlink-1" href="https://www."></a>
</div><div class="box">
<div class="box-img"><img alt="" src="http://www..png"></div>
<div class="box-text">テスト</div>
<a class="productlink-1" href="https://www."></a>
</div><div class="box">
<div class="box-img"><img alt="" src="http://www..png"></div>
<div class="box-text">テスト</div>
<a class="productlink-1" href="https://www."></a>
</div><div class="box">
<div class="box-img"><img alt="" src="http://www..png"></div>
<div class="box-text">テスト</div>
<a class="productlink-1" href="https://www."></a>
</div><div class="box">
<div class="box-img"><img alt="" src="http://www..png"></div>
<div class="box-text">テスト</div>
<a class="productlink-1" href="https://www."></a>
</div>

.box {
   position: relative;
  background-color: #ECECEC;
  display: flex;
  flex-wrap: nowrap;
  margin: 20px auto;
}

.box > div{
  padding:5px;
}

.box-img{
  width: 85px;
  height: 160px;
}

.box-img img {
  max-width: 100%;
}

.box-text{
  flex:1;
  display: flex;
  align-items: center;
  font-size: 17px;
  color: #0085c9;
  text-decoration: underline;
}

.box a{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

!(1f7472ccef290c9de140c24a6f2016ed.png)

Answer 1

画像が入っているブロックのサイズを下記のように指定していますが、これは画像のサイズと同じですか。もし、違うなら、同じにするか(あるいは縦横比が同じになるように)、設定自体を削除すればどうでしょうか。

.box-img{
  width: 85px;
  height: 160px;
}

Comments

[yuusuke001]

ご回答ありがとうございました。画像のサイズがそれぞれまちまちでしたので、縦横固定したのですが出来ないようですね。設定自体を削除してしまうと画像の大きさに応じてブロックの大きさも変わってしまうようですので、画像の大きさを全て同じに変更致しました。ありがとうございます。

[hatena19]

異なるサイズ、縦横比の画像を、サイズ固定で表示する場合は、object-fit を使うといいでしょう。ただし、IEは非対応ですが。
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

[yuusuke001]

ご丁寧にありがとうございます。参考にさせていただきます。