Как автоматически выравнять иконку на фоне по вертикали?

Question

[Посторонним В.]

Есть инлайн-блок с динамическим размером шрифта, и перед ним нужно установить иконку, а так чтобы она этот блок сдвигала по горизонтали вправо (как будто я просто вставил её в код), и чтоб между ними был зазор в em.

<div class="post-preview_main__date"><span class="post-preview_main__date__value">11.01.2017</span></div>

.post-preview_main__date {
  display: inline-block;
  float:left;
}

.post-preview_main__date:before {
  content: '';
  background: url('/images/svg/ic_date_range_black.svg') no-repeat;
  background-size: 100%;
  width: 1.5em;
  height: calc(5em/3);
  display: inline-block;
  margin-right: 1em;
}

Размеры иконки, как видно, зависят от размера шрифта элемента (т.е. будет меняться шрифт текста - будет меняться и размер иконки).

Как сделать, чтобы она была всегда (при любом масштабе) четко по центру текста?

Comments

[Ankhena]

Центрирование вертикальное и горизонтальное
В вашем случае я бы использовала line-height для текста и background-position для иконки

Answer 1

[Роман]

.post-preview_main__date {
    display: inline-block;
    float: left;
    line-height: calc(5em/3);
}
span.post-preview_main__date__value {
    vertical-align: top;
}

...зато работает =) а вообще нужны стили для шрифта

Comments

[Посторонним В.]

Спасибо! С переменной для line-height - то что нужно.

Answer 2

[zoozag]

background-position: center;

Comments

[Посторонним В.]

Вообще ничего не поменяло.

[Егор Живагин]

Это, по-идее, будет работать с height: 100%

[Посторонним В.]

Егор Живагин, но у меня height, как видите, задано в em.

[zoozag]

Посторонним В., вы бы на fiddle залили, чтобы потыкаться в коде можно было

Answer 3

[Егор Живагин]

На ум приходит только vertical-align: middle;
Но я не уверен, насколько это поможет.

Или сделать иконку отдельным элементом и выровнять любым известным способом