<MyRusakov.ru />

Создание Интернет-магазина на OpenCart 2.0

Создание Интернет-магазина на OpenCart 2.0

Видеокурс "Создание Интернет-магазина на OpenCart 2.0" обучит Вас созданию любых Интернет-магазинов на OpenCart 2. В первом разделе курса разбираются абсолютно все возможности данного движка с примерами.

Во втором разделе создаётся полноценный Интернет-магазин, где Вы уже всё увидите своими глазами.

И, наконец, в третьем разделе курса созданный Интернет-магазин будет размещён в Интернете.

К курсу так же идут бесплатные и очень ценные Бонусы сопоставимые с самим курсом: "Как сэкономить на Яндекс.Директ до 50%", "Дропшиппинг" и "Как раскрутить Интернет-магазин".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как выравнять по центру блок переменной ширины.

Как выравнять по центру блок переменной ширины.

Всем привет! В этой статье я расскажу, как выравнивать по центру блоки, чья ширина может изменяться динамически.

Мы уже знаем, как выравнять элемент, ширина которого нам известна. Нужно просто добавить margin: 0 auto; Однако если мы не знаем ширину элемента, его свойство width, соответственно, будет отсутствовать, и этот способ уже, увы, не сработает. Как поступать в таких случаях? Давайте узнаем.

Хорошим примером будет блок постраничной навигации. Он может содержать в себе ссылки на 3 страницы, 10 страниц и т.д. Мы не можем задать ему какую-то одну ширину. Давайте сверстаем такой блок.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Navigation</title>
</head>
<body>
  <div class="pagination">
   <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
   </ul>
  </div>
</body>
</html>

Теперь зададим стили.

#pagination ul {
  margin: 0 auto;
  overflow: hidden;
  display: table;
}

#pagination ul li {
  float: left;
  border: 1px solid #ccc;
  padding: 5px 8px;
  margin-right: 3px;
}

Т.е. все, что вам нужно сделать, это добавить блоку display: table; Почему это работает? Как вы знаете, таблицы не занимают 100% ширину, их ширина вычисляется в зависимости от контента, поэтому браузер будет ужимать блок до тех размеров, которые нужны контенту, и, таким образом, он будет знать его ширину и сможет выравнять блок по центру через обычный margin: 0 auto; Спасибо за внимание.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (10):

Mak1920 Mak1920 29.01.2015 22:43:32

Почему статьи в последнее время такие редкие?

Ответить

gemiks gemiks 01.02.2015 13:13:09

Как говорят для поисковой оптимизации.

Ответить

ivbutusov ivbutusov 12.02.2015 00:40:24

Да для ширины не так трудно сделать. Есть ещё способ с display: inline-block и у родительского элемента text-align: center - тоже работает. А вот для переменной высоты как сделать... Я имею в виду как просто сделать, без громоздких скриптов с обсчётами всех сторон. Желательно в чистом CSS. Вот это я бы очень хотел знать...

Ответить

php_programmer php_programmer 13.02.2015 20:16:39

Если я вас правильно понял http://goo.gl/vZjDag

Ответить

ivbutusov ivbutusov 14.02.2015 02:07:45

Да, похоже. Но видимо я что-то делаю не так, и у меня этот метод так и не заработал... Пытался завести в Chrome / Yandex.

Ответить

php_programmer php_programmer 18.02.2015 17:35:41

Нашел тут интересную шпаргалку по тому, как центрировать элементы в css по горизонтали и вертикали. Посмотрите, может там что-нибудь новое для себя найдете (http://goo.gl/StHPPX)

Ответить

ivbutusov ivbutusov 18.02.2015 21:42:36

Спасибо большое, по-моему это действительно то что нужно и самое полное руководство по этой теме, которое я встречал!

Ответить

php_programmer php_programmer 19.02.2015 16:06:15

Рад, что вам пригодилось!

Ответить

kva191098 kva191098 01.04.2015 15:34:33

Михаил, я сейчас пригляделся. В HTML-коде вы берете как класс элемента, а в CSS обращаетесь, как к идентификатору(id).

Ответить

atlanta atlanta 01.05.2015 05:41:53

я тоже это заметил - #pagination и .pagination - это разные вещи

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.