Как выровнять маркер списка по центру html

Как выравнивать маркер списка относительно li по центру?

Как выравнивать маркер списка относительно li по центру?
По дефолту выравнивание по верху.

Вопрос задан более трёх лет назад
3629 просмотров

Комментировать

Решения вопроса 0

Ответы на вопрос 1

Web/Android developer

Недавно отвечал на подобный вопрос.
Обрамите контент li в тег и управляете его margin ( margin-top: -5px; к примеру)

Ответ написан более трёх лет назад

Комментировать

Нравится Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

HTML
+1 ещё

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

1 подписчик
50 минут назад
17 просмотров

list-style-position

Определяет, как будет размещаться маркер относительно текста. Имеется два значения: outside — маркер вынесен за границу элемента списка (рис. 1) и inside — маркер обтекается текстом (рис. 2).

Значение outside

Рис. 1. Значение outside

Значение inside

Рис. 2. Значение inside

Синтаксис

list-style-position: inside | outside

Значения

inside Маркер является частью текстового блока и отображается в элементе списка. outside Текст выравнивается по левому краю, а маркеры размещаются за пределами текстового блока.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 3.

Применение свойства list-style-position

Рис. 3. Применение свойства list-style-position

Объектная модель

[window.]document.getElementById(» elementID «).style.listStylePosition

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

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

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

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

ul list-style-image: url(«marker.png»);
>

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

ul li background: url(«marker.png») no-repeat left center;
>

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

Создано 23.12.2013 11:59:23

Михаил Русаков

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

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

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

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

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

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

Кнопка:
Она выглядит вот так:
Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):

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

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

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

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

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

iljas-galiev 24.12.2013 09:31:35

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

Как выровнять нумерованный список по центру?

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

Отслеживать
задан 2 мар 2020 в 13:19
Cindy Longstickluv Cindy Longstickluv
87 1 1 серебряный знак 7 7 бронзовых знаков
обернуть его блочным тегом, и написать этому тегу text-align: center; а ol display: inline-block
2 мар 2020 в 13:36

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

.test < width: 100%; text-align: center; >.center < display: inline-block>li

Отслеживать
ответ дан 2 мар 2020 в 13:38
3,947 1 1 золотой знак 8 8 серебряных знаков 22 22 бронзовых знака
добавь для li text-align: left
2 мар 2020 в 13:40
@user355827 Спасибо большое, помогло. Люблю
2 мар 2020 в 13:42
@MaximLensky поправил,спасибо за замечание
2 мар 2020 в 13:43
@MaximLensky Спасибо! <3 2 мар 2020 в 13:44

Следует использовать свойство CSS list-style-position: inside

Свойство list-style-position устанавливает будет ли появляться маркер внутри пунктов списка или снаружи перед началом каждого пункта. Значение по умолчанию — outside , которое заставляет маркеры находится снаружи пунктов списка и не позволяет ему центрироваться вместе с содержимым.

Таким образом ваш код будет:

Отслеживать
ответ дан 10 апр 2023 в 21:59
11 2 2 бронзовых знака

css3
html5
веб-программирование

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.