Отцентровка изображения пункта меню

Тема в разделе "Внешний вид, шаблоны, графика", создана пользователем ustmm, 20.01.2013.

  1. Offline

    ustmm Пользователь

    Регистрация:
    26.07.2012
    Сообщения:
    121
    Симпатии:
    1
    Пол:
    Мужской
    При создании пункта меню (Джумла 1.7, и в других аналогично) есть такая опция:
    изображение ссылки.
    Несколько раз сталкивался: текст пункта меню всегда выравнивается по нижнему краю. Как сделать по центру?
    Где копать?
    На примере - сделать как кв красном квадрате. e569a7625abd.png
     
  2.  
  3. CB9T
    Offline

    CB9T Преподаватель по J! Команда форума

    Регистрация:
    21.05.2010
    Сообщения:
    2 464
    Симпатии:
    305
    Пол:
    Мужской
    элементарно задать к img
    Код (PHP):
    1. margin-left: 100px;


    Возможно понадобится еще position
     
  4. shurikkan
    Offline

    shurikkan Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    Выравнивания текста внутри LI осуществляется с помощью отступов padding:
    Код (html):
    1. li {
    2.     padding: (сверху)px (справа)px (снизу)px (слева)px;
    3. }


    Если padding недостаточно и нужно более точно выровнять текст относительно картинки ссылки - можно воспользоваться выравниванием самой картинки, применив к ней селектор li img и так же указав ему значение отступа padding:
    Код (html):
    1. li img {
    2.     padding: (сверху)px (справа)px (снизу)px (слева)px;
    3. }


    Ещё точнее - присваиваете пункту меню li значение position: relative, а вложенной в него картинке position: absolut; и регулируете отступ картинки от краёв li с помощью параметров top / right / bottom / left.

    P.S.: а ещё можно выровнять картинку, относительно текста на той же строке по-старинке:
    Код (html):
    1. <img src="..." align="absmiddle" />

    Но это довольно примитивный способ...
     
    Последнее редактирование: 20.01.2013

Поделиться этой страницей

Загрузка...