テキストと画像の高さが揃わない

Question

数字の１と画像の高さの揃え方を知りたいです。
img側にvertical-align: middle;を設定してもずれたままです。
詳しい方よろしくお願いします！

                <div class="row">
                    <div class="col-4 col-md-4">
                      <span class="rankingNum">4</span>
                      <img class="usersImg" src="images/f_f_object_162_s512_f_object_162_0bg.png"/>
                    </div>
                    <div class="col-8 col-md-8">
                      <div class="rankingTxt">タイトル</div>
                      <div class="rankingTxt">ユーザー名</div>
                      <div class="rankingTxt">投票数：1,000票</div>
                    </div>
                  </div><!--row-->

span.rankingNum{
  font-size:32px;
  margin-left: 8px;
}

img.usersImg{
  width:40px;
  height: 40px;
  border-radius: 50%;
  line-height: 2;
}

Answer 1

未検証ですが.align-middle入れるだけでいいかもしれません。
Bootstrap:vertical-align

Comments

[退会済みユーザー]

コメントありがとうございます！
vertical-align:middle;を数字と画像のクラスに付与する形で直りました！
.align-middleをそれぞれ付与でも恐らくできると思います！
回答ありがとうございます！

[m.ts10806]

でしたらBootstrapの機能を使うべきです。
わざわざ機能を作る必要はないと思います。

[退会済みユーザー]

了解です。
Bootstrapのクラスを付与する方法に修正します。

Answer 2

class="rankingNum"
class="usersImg"

それぞれのclassに

vertical-align:middle;

を追加してあげれば可能です。

Comments

[退会済みユーザー]

これで解決しました！
ありがとうございます！！