Нужно сделать выравнивание по центру на мобильных экранах. (вопрос по css)

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

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

    CHADREX Психопат

    Регистр.:
    12 янв 2014
    Сообщения:
    533
    Симпатии:
    180
    Есть страница на сайте, она сделана через конструктор страниц, поэтому в исходном коде можно только поблевать) Но суть не в этом. Мне нужно нужно эти элементы разместить по центру при использовании малых размеров экрана. Все получилось кроме черточки которая разделяет заголовок и текст.

    Я пробовал приспособить этот код:

    Код:
    @media only screen and (max-width: 768px) {
        #uvc-heading-spacer {position: relative; margin:0 auto;}
    }
    
    @media only screen and (max-width: 768px) {
        .uvc-heading-spacer {position: relative; margin:0 auto;}
    }
    
    Но увы, не помогло. Не спрашивайте меня почему он одинаковый, сам не знаю, но заголовок у меня разместился по центру только таким способом. Ну собственно вот и та страница - http://extago.com/web-lab/corporate/
     
  2. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    319
    Симпатии:
    107
    Вообще-то @media sreen and (max-width: 768px){...} или @media only screen and (max-width: 768px) {...} как раз и правильно писать, а то что вы предлагаете - вёрстка под все типы устройств, включая принтеры, проекторы, телевизоры и т.д.

    По теме: Ваш блок не центрируется сейчас, т.к. его ширина выставлена 100%. (не искал где, т.к. нет времени разбираться в коде, уж извините).

    Код:
    @media screen and (max-width: 768px) {
    #uvc-heading-spacer, .uvc-heading-spacer{position: relative; margin:0 auto; width:32px;}
    }
    вот верный вариант (повторюсь: в код не вникал, возможно вариант не совсем правильный, но всё должно заработать)
     
    Последнее редактирование: 28 дек 2014
    ultra, CHADREX и vytyacom нравится это.
  3. tovGANs

    tovGANs Создатель

    Регистр.:
    19 июн 2012
    Сообщения:
    33
    Симпатии:
    3
    .uvc-headings-line - добавить margin: 0 auto; и убрать у span float: left;
     
  4. troop3r

    troop3r Постоялец

    Регистр.:
    14 ноя 2009
    Сообщения:
    138
    Симпатии:
    22
    Добавить
    Код:
    .uvc-headings-line { float: none !important; }
     
Статус темы:
Закрыта.