<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

Вертикальное выравнивание маркера списка

Вертикальное выравнивание маркера списка

Недавно в мою службу поддержки поступил вопрос о том, как вертикально выравнивать маркер списка. По умолчанию, он находится где-то вверху. В итоге, если элемент списка многострочный, это может испортить дизайн. В этой статье я расскажу, как сделать вертикальное выравнивание маркера списка.

Начнём с того, что вот эту конструкцию сразу забудьте (если хотите выравнивать по-вертикали):

ul {
  list-style-image: url("marker.png");
}

Вместо этого нужно просто поставить фон у каждого li. Причём этот фон надо спозиционировать слева и посередине (как раз слева находится маркер, а выравнивание по-середине - это и есть вертикальное выравнивание):

ul li {
  background: url("marker.png") no-repeat left center;
}

Вот и всё. Проще, на мой взгляд, некуда, поэтому можете смело использовать эту технику для выравнивания маркера списка. Безусловно, есть и масса других способов, но, в основном, они "кривые", хоть и рабочие. Если у Вас есть мысли по тому, как решить эту задачу ещё проще, оставляйте их в комментариях.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

Константин Константин 24.12.2013 02:54:25

Михаил, думаю не помешает в подобных постах показывать результат. Скриншот хотя бы.

Ответить

Веселый Дрозд Веселый Дрозд 24.12.2013 08:24:15

Так под заголовком же. Непонятно только, почему вертикальное выравнивание center, а не middle.

Ответить

iljas-galiev iljas-galiev 24.12.2013 09:31:35

Потому что в CSS нет значения middle

Ответить

tikkiwiki tikkiwiki 24.12.2013 10:38:14

Все верно.

Ответить

Веселый Дрозд Веселый Дрозд 24.12.2013 15:47:35

Как так? http://htmlbook.ru/css/vertical-align

Ответить

sinkill sinkill 24.12.2013 17:18:13

учи css, свойство middle используется в css лишь для выравнивания в таблицах, а для свойства background используется center. 1-й center для выравнивая по горизонтали 2-й по вертикали.

Ответить

Веселый Дрозд Веселый Дрозд 24.12.2013 17:36:43

спасибо.

Ответить

Константин Константин 24.12.2013 11:26:43

Действительно, пример под заголовком.

Ответить

AlexeyS AlexeyS 02.04.2016 20:29:30

Тут главное чтоб наш новый маркер не залез на текст и убрать кружки маркеров добавив list-style-type: none;. Вот пример что должно получиться: <!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>css target</title> <style> ul { background: url("marker.png") no-repeat left center; list-style-type: none; width: 200px; } </style> </head> <body> <ul> <li>Здесь находится текст, который нужно отметить этим маркером</li> </ul> </body> </html>

Ответить

rysich rysich 25.12.2013 05:19:48

Другой способ - это вместо фона использовать :before, но его позиционировать немного труднее.

Ответить

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