1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - коммерческий форумный движок от бывших создателей vBulletin, написанный на PHP.

Расположение в слайдере картинки и текста по центру

Тема в разделе "Вопросы по стилям, изменения в CSS и шаблонах", создана пользователем KakBeOlolo, 07.05.2012.

Загрузка
  1. KakBeOlolo

    KakBeOlolo Местный

    Регистрация:
    08.10.11
    Сообщения:
    510
    Симпатии:
    93
    Версия XF:
    1.1.2
    Подскажите, как сделать, что бы в слайдере картинка и текст были по центру и что бы текст был параллельно картинке (в горизонтальной плоскости).
    у меня , как у человека не знающего html, голова пухнет уже
     
  2. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5 746
    Симпатии:
    5 311
    Версия XF:
    1.5.18
    Если картинки фиксированный высоты и текст всегда в одну строчку, то тексту нужно задать в CSS свойство line-height.
    Например, картинки всегда в высоту 75px. Тогда для текста так:
    HTML:
    .text {
      line-height:75px;
    }
    Но если в тексте появится вторая строка, то она будет ломать все, т.к. тоже по высоте будет 75px.
     
  3. KakBeOlolo

    KakBeOlolo Местный

    Регистрация:
    08.10.11
    Сообщения:
    510
    Симпатии:
    93
    Версия XF:
    1.1.2
    А что делать если надо справа от картинки несколько строк выставить?
     
  4. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5 746
    Симпатии:
    5 311
    Версия XF:
    1.5.18
    Если количество строк всегда разное, то это решение не подойдет. Если же количество строк одинаковое, то делим высоту картинки и указываем высоту строки. Для 2-х строк будет уже так:
    Код:
    .text {
      line-height:37px;
    }
    Для 3-х:
    Код:
    .text {
      line-height:25px;
    }
    Ну и т.д.

    Это решение совсем не универсальное и в данном случае больше костыль.

    Кстати, а содержимое случайно не в таблице находится? Если так, то тогда все элементарно. Указываем ячейке TD следующий стиль:
    Код:
    td.text {
      vertical-align:middle;
    }
    Ну а если содержимое в DIV'е, то я сам с удовольствием послушал бы универсальное решение по вертикальному выравниванию по центру.
     

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