リスト内の画像と文字列を上下中央揃え

Question

実現したいこと

下記の画像のようにリスト内の画像と文字列を上下中央揃えで表示したいです。
どのようにCSSを記載すればよいかご教示ください。
お願い致します。

現状のHTML・CSS

<div class="related">
  <ul>
    <a href="">
      <li>
        <img class="thumb">
        <div class="text">文字列</div>
      </li>
      ::after
    </a>
    <a href="">
      <li>
        <img class="thumb">
        <div class="text">文字列</div>
      </li>
      ::after
    </a>
</div>

.related li .thumb {
	width: 30vw;
	height: 20vw;
	float: left;
}
.related li .text {
	margin-left: 32vw;
	font-size:105%;
}
.related li a:after {
	content: "";
	display: block;
	clear: both;
}

Answer 1

.related li {
    display: flex;
    align-items: center;
}
.thumb {
    flex: none;
}

Comments

[kyoya0819]

コードはMarkDown文法を用いて書いてください。

[achamaru]

ご指摘ありがとうございます。
マークダウン文法はこれで合ってますでしょうか？
teratail初心者すぎてすみません＞＜

[kyoya0819]

ご編集ありがとうございます。
完璧です。

[achamaru]

ご確認ありがとうございました！

Answer 2

画像を忠実に再現するなら

<div>
  <img src=https://placehold.jp/1500x1000.png>
  <ul>
    <li>aiueo</li>
    <li>aiueo</li>
    <li>aiueo</li>
  </ul>
</div>
<div>
  <img src=https://placehold.jp/1500x1000.png>
  <ul>
    <li>aiueo</li>
    <li>aiueo</li>
    <li>aiueo</li>
    <li>aiueo</li>
  </ul>
</div>

img {
  width:30vw;
  height:20vw
}
ul {
  display: inline-block
}
img,ul {
  vertical-align: middle;
}

Comments

[kyoya0819]

サンプル
https://codepen.io/asuchi0819/pen/yLLpGWv?editors=1100#0

Answer 3

.related li {
  list-style: none;
}

.related li a {
  display: flex;
  align-items: center;
}

https://developer.mozilla.org/ja/docs/Web/CSS/align-items

Answer 4

<ul>の直下には<li>だけしか置けませんので、<a>タグは<li>の内側に書きます。

<div class="related">
  <ul>
    <li>
      <a href="">
        <dl>
          <dt><img></dt>
          <dd>文字列</dd>
        </dl>
      </a>
    </li>
    <li>
      <a href="">
        <dl>
          <dt><img></dt>
          <dd>文字列</dd>
        </dl>
      </a>
    </li>
  </ul>
</div>

.related ul li {
  padding-bottom:2vw;
}
.related ul li a {
  display:block;
}
.related ul li a dl {
  display:flex;
  align-items:center;
}
.related ul li a dl dt {
  flex-shrink:0;
  width:30vw;
}
.related ul li a dl dt img {
  width:100%;
  height:auto;
}
.related ul li a dl dd {
  flex-grow:1;
  margin-left:2vw;
  font-size:105%;
}

画像の縦横比が変わっても対応できるように変えてあります。