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

Тема в разделе "Верстка", создана пользователем verfaa, 27 фев 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    371
    Симпатии:
    41
    Всем привет.
    Как можно выровнять текст в ссылках, стоящий справа от иконки, по одной оси? Чтобы текст располагался ровно по центру иконок.
    Вот как выглядит это сейчас:
    [​IMG]

    Html код примерно такой
    Код:
    <img src="url" alt="" />Email<br />
     
    <a href="url"><img src="url" alt="" /> Add to Hot List</a> <br /> 
     
  2. andrei_k

    andrei_k

    Регистр.:
    17 янв 2010
    Сообщения:
    251
    Симпатии:
    52
  3. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    371
    Симпатии:
    41
    хм, пробую
    Код:
    <a href="url"><img src="url" alt="" /> <span style="vertical-align: middle">Add to Hot List</span></a> <br /> 
    никакого эффекта, как правильно применить это свойство?
     
  4. andrei_k

    andrei_k

    Регистр.:
    17 янв 2010
    Сообщения:
    251
    Симпатии:
    52
  5. ram222

    ram222 Da Vinci

    Регистр.:
    27 апр 2009
    Сообщения:
    744
    Симпатии:
    73
    vertical-align работает не во всех браузерах,
    думаю придётся прописать класс для текста, а там уже отступы.
    Например
    Код:
    <a href="url"><img src="url" alt="" /> <span class="ssill">Add to Hot List</span></a>
    А в стиле
    Код:
    .ssiil {margin-top:5px;}
    Тут уже выставить опытным путём количество px.
    И высота картинок желательно чтобы одинаковая была, иначе на каждую ссылку свой класс прописывать придётся.
     
  6. Kornor

    Kornor Писатель

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

    noxxxxx Постоялец

    Регистр.:
    19 апр 2007
    Сообщения:
    132
    Симпатии:
    32
    Я в подобной ситуации обычно пользуюсь line-height.
    В этом случае текст будет выравниваться точно по середине блока.
    При условии, что нет требования поддержки IЕ6.
    Код:
    .box { height: 50px; line-height: 50px; }
    Может и не правильно, но работает. :rolleyes:
     
    verfaa нравится это.
  8. Satariall

    Satariall Писатель

    Регистр.:
    5 мар 2012
    Сообщения:
    4
    Симпатии:
    2
    Я бы добавил еще white-space: nowrap; и overflow: hidden; дабы предусмотреть нестандартное количество текста в блоке.
     
    verfaa и noxxxxx нравится это.
  9. Sonic

    Sonic Создатель

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

    Eclipseg Создатель

    Заблокирован
    Регистр.:
    24 авг 2011
    Сообщения:
    28
    Симпатии:
    2
    <a title="заголовок" href="ссылка"> <span> <img title="заголовок" style="vertical-align: middle;" src="путь к картинке" alt="описание" height="высота" width="ширина" /> Текст по центру</span> </a>

    и это точно работает)
     
    zmej-gorunuch и sarhov нравится это.
Статус темы:
Закрыта.