<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

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

Подписавшись по 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, но его позиционировать немного труднее.

Ответить

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