Jump to content

Recommended Posts

Здравствуйте!

Такая проблема возникла, не получается сделать блоки в футере по центру 3 блока. 

Уже пробовал даже так:
 

[class*="block_"] {
  display: inline-block;
  width: 30%;
  border: 1px solid #000;
  padding: 5px;
  margin: 2px;
  text-align: left;
}

.content {
  display: block;
  width: 90%;
  margin: 0 auto;
}
<div class="content">
  <div class="block_01">
    Текст первого блока
  </div>
  <div class="block_02">
    Текст второго блока
  </div>
  <div class="block_03">
    Текст третьего блока
  </div>  
</div>

Но блоки либо ставятся по центру, но внутри самих бллоков тоже все по центру, либо все блоки в левой стороне, но и внутри блоков выравнивание тоже по левому краю. Подскажите, пожалуйста, как сделать блоки по центру?

2c6ec20679f9.jpg

 

Сейчас код выглядит так:

<footer>
  <div class="container">
    <div class="row">
      <?php if ($informations) { ?>
      <div class="col-sm-3">
        <h5><?php echo $text_information; ?></h5>
        <ul class="list-unstyled">
          <?php foreach ($informations as $information) { ?>
          <li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>
          <?php } ?>
        </ul>
      </div>
      <?php } ?>
      <div class="col-sm-3">
        <h5><?php echo $text_service; ?></h5>
        <ul class="list-unstyled">
          <li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li>
          <li><a href="<?php echo $return; ?>"><?php echo $text_return; ?></a></li>
          <li><a href="<?php echo $sitemap; ?>"><?php echo $text_sitemap; ?></a></li>
        </ul>
      </div>
      <div class="col-sm-3">
        <h5><?php echo $text_account; ?></h5>
        <ul class="list-unstyled">
          <li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
          <li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
          <li><a href="<?php echo $wishlist; ?>"><?php echo $text_wishlist; ?></a></li>
          <li><a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a></li>
        </ul>
      </div>
    </div>
    <hr>
    <p>Opencart.com</p>
  </div>
</footer>

 

Edited by IvanB

Share this post


Link to post
Share on other sites
<div class="col-sm-3">

12:3=4

 

Сетка бутстрапа имеет 12 колонок

 

http://getbootstrap.com/css/#grid.

  • +1 1

Share this post


Link to post
Share on other sites

Добавил в дивы блоков col-xs-4 как там сказано:

 

  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.

Но по прежнему все тоже самое, как на скрине в первом сообщении :(

Share this post


Link to post
Share on other sites
44 минуты назад, IvanB сказал:

Добавил в дивы блоков col-xs-4

 

col-sm и col-xs - несколько разные вещи

меняйте col-sm-3 на col-sm-4

Share this post


Link to post
Share on other sites
19 минут назад, AlexDW сказал:

 

col-sm и col-xs - несколько разные вещи

меняйте col-sm-3 на col-sm-4


Не помогло, поставил col-sm-4, выравнивание все равно по левому краю страницы (как на скрине в 1 сообщении).

 

<footer>
  <div class="container">
    <div class="row">
      <?php if ($informations) { ?>
      <div class="col-sm-4">
        <h5><?php echo $text_information; ?></h5>
        <ul class="list-unstyled">
          <?php foreach ($informations as $information) { ?>
          <li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>
          <?php } ?>
        </ul>
      </div>
      <?php } ?>
      <div class="col-sm-4">
        <h5><?php echo $text_service; ?></h5>
        <ul class="list-unstyled">
          <li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li>
          <li><a href="<?php echo $return; ?>"><?php echo $text_return; ?></a></li>
          <li><a href="<?php echo $sitemap; ?>"><?php echo $text_sitemap; ?></a></li>
        </ul>
      </div>
      <div class="col-sm-4">
        <h5><?php echo $text_account; ?></h5>
        <ul class="list-unstyled">
          <li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
          <li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
          <li><a href="<?php echo $wishlist; ?>"><?php echo $text_wishlist; ?></a></li>
          <li><a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

 

Кэш чистил и обновлял, ориентировался по исходному коду в браузере.
Может есть еще идеи?..

Edited by IvanB

Share this post


Link to post
Share on other sites

в подобных ситуациях помогает ссылка на проблемную страницу

иначе - только гадать

Share this post


Link to post
Share on other sites

Если ко всем дивам добавить style="text-align: center;"

<div class="col-sm-4" style="text-align: center;">

Получится так:

Capture.thumb.PNG.922c25c18aa64ffef854ae44b2fb9543.PNG

 

Можете создать отдельный класс в стилях.

Share this post


Link to post
Share on other sites
В 12.04.2017 в 13:18, kiborg сказал:

Если ко всем дивам добавить style="text-align: center;"

<div class="col-sm-4" style="text-align: center;">

Получится так:

Capture.thumb.PNG.922c25c18aa64ffef854ae44b2fb9543.PNG

 

Можете создать отдельный класс в стилях.

а толк? блок нужно по центру, а не весь блок и ссылки.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Similar Content

    • By Nekto
      300.00 руб
      Скачать/Купить дополнение


      Редактируем футер 2.0
      Добавлет в футер
      1 - Колонку контакты в которой выводятся, адрес, телефон, email, время работы, коментарий **.
      2 - Ссылки на социальные сети **.
      3 - Способы оплаты Cards (или что угодн HTML) *.
      4 - Вывод HTML, большой блок, шириной в 100% , можно разбить на меньшые*.
      5,6,4 - 3 блока одинаковой ширины, Вывод HTML, например для вывода счетчика посетителей, Кнопки "Поделиться ссылкой", *.
      * - Вывод HTML кода, в любой из этих блоков можно вывести как значки fontawesome так и текст, ссылки, изображения (их можно загрузить через текстовый редактор), изображение со ссылкой, код счетчика, виджет соцсетей, карту и т.д.
      ** - если поле не заполненно, значек не появляется.
      Не создает дополнительной нагрузки на БД, заменяет запрос "config_name" на другой.
      Простая установка через OcMod. Включить и настроить в модулях.
      Насройка блоков
      1 - заполните поля "телефон, email и т.д. "все заполненные поля появятся в колонке "Контакты" с соответствующими значками.
      2 - добавьте ссылки на ваши страницы в социальных сетях "все заполненные поля появятся в блоке 2" с соответствующими значками.
      3 - в этот блок можно добавить способы оплаты принимаемые на сайте в виде "Font Awesome Icons" (примеры и ссылка на все значки Font Awesome непосредственно в модуле) или в виде ссылки на изображение, вот так -
      <img src="http://cartopen.ru/image/data/2031/install-footer5.jpg" alt="">
      4 - можно вставить схему проезда - карту, или что угодно HTML. Блок можно поделить на части, как на демо вставив
      <div class="col-sm-4">ВИДЖЕТ В КОНТАКТЕ - КОДВИДЖЕТА</div>
      <div class="col-sm-8">КАРТА - КОД КАРТЫ</div>
      5,6,7 - 5 вставлен код поделиться ссылкой, 6 обычный текст, 7 - код счетчика посетителей.
      Демо
      Установка
      В панели администрирования перейти в Дополнения - Установка дополнений Загрузить zip файл дополнения через OCMOD В панели администрирования перейти в Дополнения - Менеджер дополнений, нажать кнопку Обновить Включить модуль и заполнить необходимые поля. Файл для тестирования Вашего шаблона, в каком месте появятся блоки.
      Если тестирование не прошло удачно, Вы можете обратиться в личку для ручной установки
      для этого мне понадобятся достув админку, ftp доступ и некоторое время. Доплата не нужна за это.
      Скачать Добавил Nekto Добавлено 29.01.2016 Категория Редакторы Системные требования Метод активации Без активации Ioncube Loader Нет OpenCart 2.3 ocStore 2.3 OpenCart.Pro, ocShop Не проверялось Обращение к серверу разработчика Старая цена  
    • By crd
      999.00 руб
      Скачать/Купить дополнение


      HYPER Positions +70 позиций модулей - oc2.0 - 2.1 - 2.2x
      70 модульных позиций в 24х блоках  - Оформление, лендинг, дизайн.
      эта версия для opencart 2.0 - 2.1 - 2.2
      для  версии 2.3x >>   ТУТ
      для опенкарт 3х - тут
       
      В модуле никогда не было стучалок и прочей лапши - всем, кто скачал где то - где модуль неофициально представлен - мои поздравления с вирусами и свободным доступом к вашей базе данных
       
      Забудьте об однообразном расположении позиций вывода модулей как инкубационные яйца))
      Позаботьтесь о презентабельной подаче вашего сайта - это не только лицо вашей компании но и ваше лицо!
      Модуль HYPER Positions позволяет увеличить количество позиции и вывести любой модульный контент как пожелает ваша фантазия, позволяя более презентабельно и эффективно оформить любую страницу вашего сайта!
      Модуль не затирает а заменяет ваши стандартные схемы на свои! если что то не так - то достаточно его выключить в модификаторах!
      описание
      Модуль HYPER Positions позволяет увеличить количество позиции и вывести любой модульный контент как пожелает ваша фантазия, позволяя более презентабельно и эффективно оформить любую страницу вашего сайта!
      Модуль добавляет к уже имеющимся блокам ещё 24 блочных позиций и 70 колонок вывода модулей в 5 секциях!
      Внедрены четыре вида блоков общее количество которых 24 штуки каждый из которых так же можно растянуть на всю ширину экрана
      Восемь блоков четырех колоночных позиций = 32 модульных позиций Шесть блоков трех колоночных позиций = 18 модульных позиций Пять блоков трех колоночных позиций по типу стандарта = 15 модульных позиций Пять блоков с одно модульной позицией = 5 модульных позиций Возможность перетаскивать модули по сортировке Переход к редактированию модуля  
      ДЕМО  с оформлением
      АДМИНКА  demo\demo
           все модульные позиции              один из вариантов             чем ни лендинг?))

             

      Схемы настройки блоков
               
      + Вывод виджетов SEO CMS TOP от markimax
       
      Вывести можно хоть все позиции но! лучше только те, что вам нужны!
       
      Установка:
      В административной части во вкладке *Установка дополнений* загрузить архив. В административной части во вкладке *Менеджер дополнений* нажать кнопку обновления. ВНИМАНИЕ!
      Ни какие файлы не затираются
      --------------
      Возможно будет нужна адаптация под ваш шаблон  нужно смотреть походу..
      в любом случае если, что то не так пишите в тему поддержки - попробуем сделать
      ВНИМАНИЕ!
      Не подходит для использования под дебильные шаблоны по типу Jornal, Fastor и им подобных!
      Поддержка и адаптация под прочие шаблоны возможна только на ветке 2.3x!
      Прежде чем приобрести модуль уточняйте все моменты в теме поддержки!
       
      Если вы купили модуль и он у вас не корректно установился, не заработал и т.д. и вы мне отказываете в доступах для поддержки - значит поддержка вам ненужна
       
      Выражаю отдельную благодарность за прямое и косвенное участие в разработке модуля:
        @AWARO,  @chukcha , @ElyCoin
      - а также всем пользователям кто приобрёл это дополнение!
       
      Благодарность ваша это оставить отзыв к файлу. Это мотивирует нас на развитие модуля.
      Спасибо вам за спасибо!)
      Пользуйтесь на здоровье)
       
      Прежде чем купить читайте описание!
      Если не смотря на это вы всё же приобрели то знайте Модуль возврату или обмену не подлежит! Учтите этот момент!
       
      ЛИЦЕНЗИОННОЕ СОГЛАШЕНИЕ!
       
      Добавил crd Добавлено 11.04.2017 Категория Меню, дизайн, внешний вид Системные требования Сайт разработчика http://awaro.ru Метод активации Автоматическая активация Ioncube Loader Нет OpenCart 2.2
      2.1
      2.0 ocStore 2.2
      2.1 OpenCart.Pro, ocShop Opencart.pro 2.1
      OcShop 2.0.3.х Обращение к серверу разработчика Нет Старая цена 1199  
    • By crd
      999.00 руб
      Скачать/Купить дополнение


      HYPER Positions +70 позиций модулей - oc2.3x
      Лендинг дизайн, оформление.. 70 модульных позиций в 24х блоках - oc-2.3x
      эта версия для opencart 2.3х
      для опенкарт 3х - тут
      для opencart 2.0 - 2.1 - 2.2  - тут
      Модуль адаптирован под шаблоны
      shop-store 2 TechStore Fractal Royal Modern july Next Default  
      ПРЕЖДЕ ЧЕМ ПРИОБРЕСТИ ВНИМАТЕЛЬНО ЧИТАЕМ ОПИСАНИЕ!
       
      В модуле никогда не было стучалок и прочей лапши - всем, кто скачал где то - где модуль неофициально представлен - мои поздравления с вирусами и свободным доступом к вашей базе данных 
       
      Забудьте об однообразном расположении позиций вывода модулей как инкубационные яйца))
      Позаботьтесь о презентабельной подаче вашего сайта - это не только лицо вашей компании но и ваше лицо!
      Модуль HYPER Positions позволяет увеличить количество позиции и вывести любой модульный контент как пожелает ваша фантазия, позволяя более презентабельно и эффективно оформить любую страницу вашего сайта!

      Модуль добавляет к уже имеющимся блокам ещё 24 блочных позиций и 70 колонок вывода модулей в 5 секциях!
      Внедрены четыре вида блоков обшее количество которых 24 штуки каждый из которых так же можно растянуть на всю ширину экрана
      Восемь блоков четырех колоночных позиций = 32 модульных позиций Шесть блоков трех колоночных позиций = 18 модульных позиций Пять блоков трех колоночных позиций по типу стандарта = 15 модульных позиций Пять блоков с одно модульной позицией = 5 модульных позиций Возможность перетаскивать модули по сортировке
        ДЕМО  с оформлением
      АДМИНКА  demo\demo
           все модульные позиции              один из вариантов             чем ни лендинг?))

             

      Схемы настройки блоков
      кликните по картинке и откройте в полном размере
               
      + Вывод виджетов SEO CMS TOP от markimax
       
      Вывести можно хоть все позиции но лучше то что нужно!
       
      Установка:
      В административной части во вкладке *Установка дополнений* загрузить архив. В административной части во вкладке *Менеджер дополнений* нажать кнопку обновления. Ни какие файлы не затираются
      --------------
      Возможно будет нужна адаптация под ваш шаблон  нужно смотреть походу..
      в любом случае если, что то не так пишите в тему поддержки - попробуем сделать
      ВНИМАНИЕ!
      Не подходит для использования под дебильные шаблоны по типу Jornal, Fastor и им подобных!
      Поддержка и адаптация под прочие шаблоны возможна только на ветке 2.3x!
      Прежде чем приобрести модуль уточняйте все моменты в теме поддержки!
       
      Если вы купили модуль и он у вас не корректно установился, не заработал и т.д. и вы мне отказываете в доступах для поддержки - значит поддержка вам ненужна
       
      Выражаю отдельную благодарность за прямое и косвенное участие в разработке модуля:
      @AWARO, @chukcha , @ElyCoin
      - а также всем пользователям кто приобрёл это дополнение!
       
      Благодарность ваша это оставить отзыв к файлу. Это мотивирует нас на развитие модуля.
      Спасибо вам за спасибо!)
      Пользуйтесь на здоровье)
       
      Прежде чем купить читайте описание!
      Если не смотря на это вы всё же приобрели то знайте Модуль возврату или обмену не подлежит! Учтите этот момент!
       
      ЛИЦЕНЗИОННОЕ СОГЛАШЕНИЕ!
       
      Добавил crd Добавлено 25.01.2017 Категория Меню, дизайн, внешний вид Системные требования прямые руки Сайт разработчика https://awaro.ru Метод активации Автоматическая активация Ioncube Loader Нет OpenCart 2.3 ocStore 2.3 OpenCart.Pro, ocShop Opencart.pro 2.3 Обращение к серверу разработчика Нет Старая цена 1199  
    • By Gilbert
      Шаблон Fastfood opencart 2.1, статьи в футер добавляются через редактирование модуля "FastFood - настройки шаблона ver 1.1",  но я не знаю откуда брать путь(ссылку) на статью. Как быть? Помогите, пожалуйста.

       

       

    • By crd
      70 модульных позиций в 24х блоках  - Оформление, лендинг, дизайн.
      эта версия для opencart 2.0 - 2.1 - 2.2
      для  версии 2.3x >>   ТУТ
      для опенкарт 3х - тут
       
      В модуле никогда не было стучалок и прочей лапши - всем, кто скачал где то - где модуль неофициально представлен - мои поздравления с вирусами и свободным доступом к вашей базе данных
       
      Забудьте об однообразном расположении позиций вывода модулей как инкубационные яйца))
      Позаботьтесь о презентабельной подаче вашего сайта - это не только лицо вашей компании но и ваше лицо!
      Модуль HYPER Positions позволяет увеличить количество позиции и вывести любой модульный контент как пожелает ваша фантазия, позволяя более презентабельно и эффективно оформить любую страницу вашего сайта!
      Модуль не затирает а заменяет ваши стандартные схемы на свои! если что то не так - то достаточно его выключить в модификаторах!
      описание
      Модуль HYPER Positions позволяет увеличить количество позиции и вывести любой модульный контент как пожелает ваша фантазия, позволяя более презентабельно и эффективно оформить любую страницу вашего сайта!
      Модуль добавляет к уже имеющимся блокам ещё 24 блочных позиций и 70 колонок вывода модулей в 5 секциях!
      Внедрены четыре вида блоков общее количество которых 24 штуки каждый из которых так же можно растянуть на всю ширину экрана
      Восемь блоков четырех колоночных позиций = 32 модульных позиций Шесть блоков трех колоночных позиций = 18 модульных позиций Пять блоков трех колоночных позиций по типу стандарта = 15 модульных позиций Пять блоков с одно модульной позицией = 5 модульных позиций Возможность перетаскивать модули по сортировке Переход к редактированию модуля  
      ДЕМО  с оформлением
      АДМИНКА  demo\demo
           все модульные позиции              один из вариантов             чем ни лендинг?))

             

      Схемы настройки блоков
               
      + Вывод виджетов SEO CMS TOP от markimax
       
      Вывести можно хоть все позиции но! лучше только те, что вам нужны!
       
      Установка:
      В административной части во вкладке *Установка дополнений* загрузить архив. В административной части во вкладке *Менеджер дополнений* нажать кнопку обновления. ВНИМАНИЕ!
      Ни какие файлы не затираются
      --------------
      Возможно будет нужна адаптация под ваш шаблон  нужно смотреть походу..
      в любом случае если, что то не так пишите в тему поддержки - попробуем сделать
      ВНИМАНИЕ!
      Не подходит для использования под дебильные шаблоны по типу Jornal, Fastor и им подобных!
      Поддержка и адаптация под прочие шаблоны возможна только на ветке 2.3x!
      Прежде чем приобрести модуль уточняйте все моменты в теме поддержки!
       
      Если вы купили модуль и он у вас не корректно установился, не заработал и т.д. и вы мне отказываете в доступах для поддержки - значит поддержка вам ненужна
       
      Выражаю отдельную благодарность за прямое и косвенное участие в разработке модуля:
        @AWARO,  @chukcha , @ElyCoin
      - а также всем пользователям кто приобрёл это дополнение!
       
      Благодарность ваша это оставить отзыв к файлу. Это мотивирует нас на развитие модуля.
      Спасибо вам за спасибо!)
      Пользуйтесь на здоровье)
       
      Прежде чем купить читайте описание!
      Если не смотря на это вы всё же приобрели то знайте Модуль возврату или обмену не подлежит! Учтите этот момент!
       
      ЛИЦЕНЗИОННОЕ СОГЛАШЕНИЕ!
       
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.