vertical align CSS property

Question

Это может показаться довольно простой проблемой, но до сих пор мне удалось пнуть меня. Свойство вертикального выравнивания работает правильно для меня. Однако, когда я добавляю тег
после текста, который я хочу запустить по центру изображения, любой текст после тега
отображается непосредственно под изображением.

Пример:

<img src="test.png" width="50" height="50" alt="test" style="vertical-align:middle;"/>  This text is fine. <br />This text is not. 

Answer 1

Попробуйте это:

<img src="test.png" width="50" height="50" alt="test" style="vertical-align:middle;"/>   

<div style='display:inline-block; vertical-align:top;'> 
    <span style='display:inline-block;vertical-align:middle;'>This text is fine. <br />This text is not. 
</div> 

Answer 2

Ваш пример содержит тег <br />, который по определению означает разрыв строки.

Answer 3

Здесь лучший способ выравнивание по центру почти все в CSS.

.centrado-vertical{ 
    position: relative; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
}