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

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

Fiddle 1

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

Fiddle 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/