Перейти к содержанию

Рекомендуемые сообщения

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

Такая проблема возникла, не получается сделать блоки в футере по центру 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>

 

Изменено пользователем IvanB

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
<div class="col-sm-3">

12:3=4

 

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

 

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Добавил в дивы блоков 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.

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
44 минуты назад, IvanB сказал:

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

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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>

 

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

Изменено пользователем IvanB

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Capture.thumb.PNG.922c25c18aa64ffef854ae44b2fb9543.PNG

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 12.04.2017 в 13:18, kiborg сказал:

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


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

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

Capture.thumb.PNG.922c25c18aa64ffef854ae44b2fb9543.PNG

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От 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 Не проверялось  
    • От MinMart
      Коллеги, как в Ocstore правильно прописать копирайт, что бы год сам менялся по серверу ?
       
      Прописал &copy;  2009 – <?php echo date('Y'); ?>
      не работает!
    • От sanyouk95
      Нужна помощь. Как вставить в футер просто текст ссылки. Или как убрать ссылки с кнопок в футере.
    • От someday
      В футере была ссылка, которую я удалил:
      <a href="<?php echo $special; ?>"><?php echo $text_special; ?></a>
      Теперь она не отображается, но при просмотре всего кода страницы (Ctrl+U) она там есть. Странно, то что при просмотре кода через Ctrl+shift+I ее нет.
      Попробовал обратно добавить ссылку <a href="<?php echo $special; ?>"><?php echo $text_special; ?> при просмотре всего кода страницы Ctrl+U ничего не меняется, а при просмотре кода Ctrl+shift+I добавляются Акции.
      Подскажите пожалуйста, что это за глюк такой? Кэш удалял и в браузере и в opencart, но view-source:https://ipufik.ru/ не хочет меняться ни в какую..
    • От seregakot1994
      Всем привет! Делаю сайт и зашел в тупик на одной проблеме - не могу разделить слайдер на 3 блока, при том что бы каждый из рисунков вел на определенную ссылку. Может кто чем помочь? 

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.