Вертикальное выравнивание по изображению и тексту в пространстве

Question

У меня есть текст и изображение по вертикали.

(Вопрос/выпуск) Но я хотел бы поставить еще одну линию под ним, как так ...

Я попытался положить <br> в спину, но текст затем переходит непосредственно под изображение.

Вот код для первого вертикального выравнивания.

<img src='/' class='circular' style='vertical-align:middle;'><span class='text'>Text</span> 

Answer 1

Вы можете использовать line-height текст, если знаете высоту изображения.

Смотрите этот фрагмент:

.img { 
 
    float: left; 
 
} 
 
.txt { 
 
    float: left; 
 
    margin: 5px 0 5px 10px; 
 
} 
 
.txt-line { 
 
    line-height: 20px; 
 
}

<div> 
 
    <img class="img" src="http://placehold.it/50x50" /> 
 
    <div class="txt"> 
 
     <div class="txt-line">Title</div> 
 
     <div class="txt-line">Description</div> 
 
    </div> 
 
</div>