Поддержание плавающего диапазона valign middle

Question

Я пробовал много, чтобы сохранить промежуточный valign middle. На данный момент это выглядит следующим образом:

Но я хочу, чтобы:

Здесь вы можете поиграть: Link

Answer 1

.wrapper{ 
 
    display:table-row; 
 
} 
 

 
.image-left{ 
 
    width:50px; 
 
    height:50px; 
 
    background-color:grey; 
 
    } 
 

 
.text-block{ 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
}

<div class="wrapper"> 
 
    <div class="image-left"> 
 
    </div> 
 
    <div class="text-block"> 
 
    <span>One does not simply css.</span> 
 
    </div> 
 
</div>

Всякий раз, когда мне нужно выравнивать текст, я стараюсь использовать display: table-cell с vertical-align:middle на родительском элементе span или div, где текст находится внутри.

Но есть буквально множество способов достичь этого. Я предлагаю вам немного Google и посмотрю, какой из них лучше всего подходит в вашей ситуации. Я просто предпочитаю таблицы-ячейки, так как они автоматически настраиваются на все содержимое в строке и выглядят чистыми.

Подробная информация: http://phrogz.net/css/vertical-align/

Ваша ссылка не работала кстати.