画像入りのliの横に文字を画像の真ん中の高さに配置したい

前提・実現したいこと

下記のような画像だとして、その真ん中に文字を持っていきたいのですが、うまく行きません…。

こんな感じで、四番目のliは画像の右側、
六番目のliは画像の左側に文字を配置したいのです。

該当のソースコード

html
1  <div class="contents">
2                <ul>
3                    <li>文字文字文字文字文字</li>
4                    <li>文字文字文字文字文字</li>
5                    <li>文字文字文字文字文字</li>
6                    <li><img src="img/yen.png">文字文字文字文字文字</li>
7                    <li>文字文字文字文字文字</li>
8                    <li>文字文字文字文字文字<img src="img/yen.png"></li>
9                </ul>
10            </div>

SCSS
1
2.contents li{
3    list-style: none;
4    line-height: 5;
5        &:nth-child(1){
6            padding-left: 60px;        
7        }
8        &:nth-child(2){
9            text-align: left;
10        }
11        &:nth-child(3){
12            text-align: right;
13        }
14        &:nth-child(4){
15            display: inline-block;
16            vertical-align: middle;
17        }
18        &:nth-child(5){
19            text-align: right;
20        }
21        &:nth-child(6){
22            display: inline-block;
23            vertical-align: middle;
24        }
25}

これ以外だと、
<img src="sample.gif" alt="サンプル" align="middle">
をやってみましたが、だめでした…

初心者ですみません。

もし、可能でしたら助けて頂けますと幸いです。
よろしくお願い致します。

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

回答1件

ベストアンサー

FlexBox を使うと簡単です。

scss
1.contents li{
2    list-style: none;
3    line-height: 5;
4        &:nth-child(1){
5            padding-left: 60px;        
6        }
7        &:nth-child(2){
8            text-align: left;
9        }
10        &:nth-child(3){
11            text-align: right;
12        }
13        &:nth-child(4){
14            display: flex;
15            align-items: center;
16        }
17        &:nth-child(5){
18            text-align: right;
19        }
20        &:nth-child(6){
21            display: flex;
22            align-items: center;
23        }
24}