Inline + margin

[GuitarFan]

<div style='float: left; text-align: center; width: 200px; margin: 3px; border: 1px solid black;'>
<img src='http://mmoland.ru/webapp/mmoland/files/images/2012/08/image012.jpg'/>

<div style='display: inline; margin-bottom: 5px;'>
<a href='/catalog/blabla'>blabla</a>
</div>
</div>

Вот этот же код http://jsfiddle.net/fZLkV/2/

Мне нужно центрировать текст ссылки по высоте, но сейчас текст прижат к низу.

Я пробовал сделать div (в котором ссылка находится) выше с помощью matgin-bottom. Но он не работает вместе с display: inline.

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

Edited June 2, 2013 by GuitarFan

[zlodeev]

http://jsfiddle.net/fZLkV/3/

[GuitarFan]

Спасибо. Но почему vertical-align:middle; для картинки влияет так же и на текст?

[zlodeev]

Насколько я понял, то при присвоении к одному строчному элементу этого свойства изменяется baseline для всех остальных строчных в блоке, т.е. нижняя линия к которой прижаты текстовые элементы перемещается в центр высоты строки. Как то муторно объяснил, сам наверно не соображу что написал.

Наверно лучше будет так

А ещё лучше так:

Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.

[GuitarFan]

Относительно своего родителя - это видимо, например как в моем случае, относительно div, в котором находится элемент. С таблицей тоже понятно.

Окружающего текста - это не очень понятно.

Видимо если справа и слева есть текст - должно выровнять элемент относительно текста.

Но почему-то в моем случае выравниваются другие элементы, а не тот, которому я ставлю этот параметр...

Об этом нигде не пишется, странно что так получается.

Edited June 3, 2013 by GuitarFan