Вертикальное выравнивание маркера списка
Недавно в мою службу поддержки поступил вопрос о том, как вертикально выравнивать маркер списка. По умолчанию, он находится где-то вверху. В итоге, если элемент списка многострочный, это может испортить дизайн. В этой статье я расскажу, как сделать вертикальное выравнивание маркера списка.
Начнём с того, что вот эту конструкцию сразу забудьте (если хотите выравнивать по-вертикали):
ul {
list-style-image: url("marker.png");
}
Вместо этого нужно просто поставить фон у каждого li. Причём этот фон надо спозиционировать слева и посередине (как раз слева находится маркер, а выравнивание по-середине - это и есть вертикальное выравнивание):
ul li {
background: url("marker.png") no-repeat left center;
}
Вот и всё. Проще, на мой взгляд, некуда, поэтому можете смело использовать эту технику для выравнивания маркера списка. Безусловно, есть и масса других способов, но, в основном, они "кривые", хоть и рабочие. Если у Вас есть мысли по тому, как решить эту задачу ещё проще, оставляйте их в комментариях.
-
Создано 23.12.2013 11:59:23
-
Михаил Русаков
Комментарии (10):
Михаил, думаю не помешает в подобных постах показывать результат. Скриншот хотя бы.
Ответить
Так под заголовком же. Непонятно только, почему вертикальное выравнивание center, а не middle.
Ответить
Потому что в CSS нет значения middle
Ответить
Все верно.
Ответить
Как так? http://htmlbook.ru/css/vertical-align
Ответить
учи css, свойство middle используется в css лишь для выравнивания в таблицах, а для свойства background используется center. 1-й center для выравнивая по горизонтали 2-й по вертикали.
Ответить
спасибо.
Ответить
Действительно, пример под заголовком.
Ответить
Тут главное чтоб наш новый маркер не залез на текст и убрать кружки маркеров добавив 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>
Ответить
Другой способ - это вместо фона использовать :before, но его позиционировать немного труднее.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.