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

Статус
В этой теме нельзя размещать новые ответы.

verfaa

Профессор
Регистрация
29 Янв 2007
Сообщения
416
Реакции
49
Всем привет.
Как можно выровнять текст в ссылках, стоящий справа от иконки, по одной оси? Чтобы текст располагался ровно по центру иконок.
Вот как выглядит это сейчас:
image_4f4ac208bcbb6.png


Html код примерно такой
Код:
<img src="url" alt="" />Email<br />
 
<a href="url"><img src="url" alt="" /> Add to Hot List</a> <br />
 
хм, пробую
Код:
<a href="url"><img src="url" alt="" /> <span style="vertical-align: middle">Add to Hot List</span></a> <br />
никакого эффекта, как правильно применить это свойство?
 
Всем привет.
Как можно выровнять текст в ссылках, стоящий справа от иконки, по одной оси? Чтобы текст располагался ровно по центру иконок.
Вот как выглядит это сейчас:
image_4f4ac208bcbb6.png


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.
И высота картинок желательно чтобы одинаковая была, иначе на каждую ссылку свой класс прописывать придётся.
 
А может проще создать табличку, в ней 2 <td>, в левой картинки в правой текст. Задать левой td точную ширину и прижать картинки к правой стенке(или по центру, как больше нравится), а в правой текст прижать к левой text-align='left' . Не совсем понял вопрос, но вроде это проще чем классы городить и пиксили подбирать
 
Я в подобной ситуации обычно пользуюсь line-height.
В этом случае текст будет выравниваться точно по середине блока.
При условии, что нет требования поддержки IЕ6.
Код:
.box { height: 50px; line-height: 50px; }
Может и не правильно, но работает. :rolleyes:
 
Я бы добавил еще white-space: nowrap; и overflow: hidden; дабы предусмотреть нестандартное количество текста в блоке.
 
А ещё можно картинки использовать как бэкграунд для ссылки. Для тэга а добавить display:block, а отступы паддингом ровнять.
 
  • Заблокирован
  • #10
<a title="заголовок" href="ссылка"> <span> <img title="заголовок" style="vertical-align: middle;" src="путь к картинке" alt="описание" height="высота" width="ширина" /> Текст по центру</span> </a>

и это точно работает)
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху