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

Discussion in 'Внешний вид, шаблоны, графика' started by ustmm, Jan 20, 2013.

  1. Offline

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

    Joined:
    Jul 26, 2012
    Messages:
    121
    Likes Received:
    1
    Gender:
    Male
    При создании пункта меню (Джумла 1.7, и в других аналогично) есть такая опция:
    изображение ссылки.
    Несколько раз сталкивался: текст пункта меню всегда выравнивается по нижнему краю. Как сделать по центру?
    Где копать?
    На примере - сделать как кв красном квадрате. e569a7625abd.png
     
  2.  
  3. CB9T
    Offline

    CB9T Преподаватель по J! Staff Member ⇒ Профи ⇐

    Joined:
    May 21, 2010
    Messages:
    2,604
    Likes Received:
    322
    Gender:
    Male
  4. AKopytenko
    Offline

    AKopytenko Russian Joomla! Team Staff Member

    Joined:
    Sep 1, 2011
    Messages:
    1,963
    Likes Received:
    168
    Gender:
    Male
    Выравнивания текста внутри 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" />

    Но это довольно примитивный способ...
     
    Last edited: Jan 20, 2013

Share This Page

Loading...