Как правильно сделать разметку?

Question

[issssrt]

gyazo.com/dffba7fd0d1d4b8e13fb39c661e048d8
У меня проблема с центиррованием иконок. Подскажите как правильно поступить чтобы иконки слева вертикально центрировались по отношению к тексту.

Answer 1

[Евгений Петров]

Тут задача обратная — центрировать разное количество строк по отношению к фиксированной высоте иконки.
Реализуется вот так

Чаще всего иконки задаются с помощью псевдоэлемента. Тогда всё будет примерно так (хотя чаще встречается абсолютное позиционирование :before, и в этом случае выравнивать требуется только элемент с текстом):
HTML

<div class="item"><span class="item-text">...</span></div>

CSS

.item {
	height: 60px;
	line-height: 60px; //вот правило, примерно центрирующее символ по высоте
}
.item:before,
.item-text {
	display: inline-block;
	vertical-align: middle;
}
.item:before {
	content: ""; //или вставляем картинку
	width: 40px;
	height: 40px;
	margin-right: 10px;
	border-radius: 50%;
	background: #369;
}
.item-text {
	line-height: normal; //не забываем вернуть высоту линии в норму
}

Вариант с использованием псевдоэлемента.

Comments

[issssrt]

Спасибо! В моем случае идеальное решение

Answer 2

[archelon]

display: table-cell;
vertical-align: middle;