Вертикальное выравнивание на изображении и тексте?

Question

У меня есть настройка тега привязки, как показано ниже

<a href='' title='' class='video-author-box hoverbox'>
    <img style='height:32px;' src='IMAGE_URL' alt='' /> 
    Username
</a>

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

Пример: http://jsfiddle.net/qZFFX/2/

Answer 1

Вот два простых решения для этого:

1. Удалите float: left изображения, чтобы оно стало встроенным, и добавьте vertical-align: middle

Скрипка 1

1. Если вы знаете высоту вашего изображения (32 пикселя в вашем случае), установите line-height его контейнера на него.

Скрипка 2

Answer 2

Вы могли бы сделать это

Добавьте span вокруг имени пользователя и стиля, например

.video-author-box span{
    display:inline-block;
    padding-top:8px;
}

Пример: http://jsfiddle.net/qZFFX/3/

Затем вы можете настроить padding, как считаете нужным.

Альтернативно, вы можете сделать это без использования span

.video-author-box{
    display:inline-block;
    padding-top:8px;
}

.video-author-box img{
    margin-top:-6px;
}

Пример 2: http://jsfiddle.net/qZFFX/5/