Как выровнять по вертикали промежуток с изображением, которое плавает вправо?

Question

Я пытаюсь сделать что-то очень похожее на выравнивающий текст рядом с вопросом об изображении: Вертикально выровнять текст рядом с изображением?

Разница в том, что я хочу, чтобы изображение плавало вправо, но, кажется, когда я делаю его float:right;, vertical-align, который решил эту проблему, больше не работает? Есть ли способ заставить img плавать вправо и выравнивать текст по центру?

<div style="width:100px">   
   <span style="vertical-align:middle">Doesn't work.</span>
   <img style="vertical-align:middle;width:30px;height:30px;float:right">
</div>

Заранее спасибо!

Answer 1

Сделайте высоту строки такой же, как у изображения.

Answer 2

Удалите float: right с изображения. Для div, поместите text-align: right. Это должно решить проблему.

<div style="width:100px; text-align: right;">   
   <span style="vertical-align:middle;">Does work.</span>
   <img style="width:30px;height:30px; vertical-align: middle;">
</div>

Надеюсь, это поможет. :)