Вертикально выравнивание по центру текста

Хорошо, вот как выглядят эти HTML-элементы прямо сейчас:

enter image description here

Я хочу, чтобы текст был центрирован с изображением. Изображение 32x32px.

Здесь мой код:

<style>
div.interface {
    line-height: 32px;
    float: left;
    margin: 10px;
    width: 450px;
    font: 14px/27px 'CalibriRegular', Arial, sans-serif;
    color: #646464; text-shadow: 1px 1px 1px #fff;
    padding-right: 10px;
}
</style>

<div class="interface"><img src="assets/icons/interface.png" />Filled with fun animations and eye-candy!  Complete with Retina graphics.</div>

Ответы

Ответ 1

Чтобы центрировать текст по вертикали, установите высоту линии так же, как высоту, например:

img{ height: 30px; }
#text{ line-height: 30px; }

И установите вертикальное выравнивание в среднее:

#text{ line-height: 30px; vertical-align:middle; }