[CSS]水色の背景色の中に画像を表示させ、その横に文字列を中央に表示させたものを縦に複数並べたい。

添付しました画像のように水色の背景色の中に画像を表示させ、その横に文字列を画像に対して中央に来るように表示させたものを縦に複数並べたいのですが、下記のようにHTMLとCSSを記述した所float: leftで画像の右に文字を回り込ませれたのですがそれ以外がうまくいきません。
添付しました画像のように表示させたい場合、どの様に記述したらいいのかお教え下さい。

HTML
1<div class="box">
2<div class="box-img"><img alt="" src="http://www.XXXX1.png"></div>
3<div class="box-text">ここに説明文を載せる</div>
4</div>
5
6<div class="box">
7<div class="box-img2"><img alt="" src="http://www.XXXX2.png"></div>
8<div class="box-text">ここに説明文を載せる</div>
9</div>
10
11<div class="box">
12<div class="box-img3"><img alt="" src="http://www.XXXX3.png"></div>
13<div class="box-text">ここに説明文を載せる</div>
14</div>

CSS
1.box-img{
2	height: 150px;
3	width: 10%;
4	float: left;
5	background-color: #09C;
6}
7.box-img1{
8	height: 150px;
9	width: 10%;
10	float: left;
11	background-color: #09C;
12}
13.box-img2{
14	height: 150px;
15	width: 10%;
16	float: lbackground-color: #09C;
17}
18.box-text{
19	height: 150px;
20	width: 100%;
21	background-color: #09C;
22 	vertical-align: middle;
23}

↓↓↓この様に表示させたいです。

m.ts10806

2020/03/24 07:13

コードはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 また、このタイトルでは範囲が広すぎます。タイトルだけで何を聞きたいのか、問題自身に寄った内容にしてください

yuusuke001

2020/03/24 07:29

ご指摘の通り、修正致しました。

行動規範の内容に同意します

回答1件

ベストアンサー

私ならFlexboxを使います。
以下は一例

html
1<div class="box">
2  <div class="box-img"><img alt="" src="http://placehold.jp/150x150.png"></div>
3  <div class="box-text">ここに<br>説明文を<br>載せる</div>
4</div>
5
6<div class="box">
7  <div class="box-img"><img alt="" src="http://placehold.jp/150x150.png"></div>
8  <div class="box-text">ここに説明文を載せる</div>
9</div>
10
11<div class="box">
12  <div class="box-img"><img alt="" src="http://placehold.jp/150x150.png"></div>
13  <div class="box-text">ここに説明文を載せる</div>
14</div>

css
1
2.box {
3  background-color: #09c;
4  display: flex;
5  flex-wrap: nowrap;
6  margin: 10px auto;
7}
8
9.box > div{
10  padding:10px;
11}
12
13.box-img {
14  width: 150px;
15}
16
17.box-img img {
18  max-width: 100%;
19}
20
21.box-text {
22  flex:1;
23  /* 以下は説明文を縦位置中央にするため */
24  display: flex;
25  align-items: center;
26}
27