Как спозиционировать текст по центру картинок

[verfaa]

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

Html код примерно такой

<img src="url" alt="" />Email<br />
 
<a href="url"><img src="url" alt="" /> Add to Hot List</a> <br />

 

[andrei_k]

Добавь свойство vertical-align
Для просмотра ссылки Войди или Зарегистрируйся

 

[verfaa]

хм, пробую

<a href="url"><img src="url" alt="" /> <span style="vertical-align: middle">Add to Hot List</span></a> <br />

никакого эффекта, как правильно применить это свойство?

 

[andrei_k]

Для просмотра ссылки Войди или Зарегистрируйся

 

[ram222]

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

Html код примерно такой

<img src="url" alt="" />Email<br />
 
<a href="url"><img src="url" alt="" /> Add to Hot List</a> <br />

vertical-align работает не во всех браузерах,
думаю придётся прописать класс для текста, а там уже отступы.
Например

<a href="url"><img src="url" alt="" /> <span class="ssill">Add to Hot List</span></a>

А в стиле

.ssiil {margin-top:5px;}

Тут уже выставить опытным путём количество px.
И высота картинок желательно чтобы одинаковая была, иначе на каждую ссылку свой класс прописывать придётся.

 

[Kornor]

А может проще создать табличку, в ней 2 <td>, в левой картинки в правой текст. Задать левой td точную ширину и прижать картинки к правой стенке(или по центру, как больше нравится), а в правой текст прижать к левой text-align='left' . Не совсем понял вопрос, но вроде это проще чем классы городить и пиксили подбирать

 

[noxxxxx]

Я в подобной ситуации обычно пользуюсь line-height.
В этом случае текст будет выравниваться точно по середине блока.
При условии, что нет требования поддержки IЕ6.

.box { height: 50px; line-height: 50px; }

Может и не правильно, но работает.

 

[Satariall]

Я бы добавил еще white-space: nowrap; и overflow: hidden; дабы предусмотреть нестандартное количество текста в блоке.

 

[Sonic]

А ещё можно картинки использовать как бэкграунд для ссылки. Для тэга а добавить display:block, а отступы паддингом ровнять.

 

[Eclipseg]

<a title="заголовок" href="ссылка"> <span> <img title="заголовок" style="vertical-align: middle;" src="путь к картинке" alt="описание" height="высота" width="ширина" /> Текст по центру</span> </a>

и это точно работает)