Центрирующие пули в центрированном списке

Question

Пример - http://jstn.info/html.html - ссылка гниль, пример больше не доступен.

Обратите внимание, что текст центрирован, а сами маркеры - нет.Как выровнять маркеры, сохраняя при этом текст / список по центру?

Answer 1

Пожалуйста, смотрите https://stackoverflow.com/a/6558833/507421

ul {
    list-style-position: inside;
}

Answer 2

Вы задали тот же вопрос на Центрирование

, и я уже ответил вам.

Дайте вашему диву имя класса center. Предполагая, что ширина вашего div равна 200px, margin:0 auto будет центрироваться, а text-align:left будет выравнивать текст по левому краю, сохраняя его центрирование из-за поля auto.

.center{
    width:200px;
    margin:0 auto;
    text-align:left;
}

Проверьте рабочий пример на http://jsfiddle.net/8mHeh/1/

Answer 3

Проблема в том, что пули контролируются ul, а не отдельными li с.Я не знаю, как сделать это с головы до головы;как быстрый взлом попробуйте

ul { list-style-type: none; text-align: center; }
li::before { content: "\2022 " }
/* 0x2022 is unicode for a bullet */

Редактировать: как указывает пользователь выше меня, вы должны центрироваться в таблице стилей, а не с align.

На самом деле здесь скрыты автоматически сгенерированные маркеры (путем установки list-style-type в `none) и созданы" псевдо-маркеры "перед каждым li.

Answer 4

Существует множество способов решения этой проблемы в зависимости от потребностей пользовательского интерфейса вашего проекта.

Я перечислил 3 возможных решения здесь: https://codesandbox.io/s/r1j95pryn

Центрированные маркеры

ul {
    list-style-position: inside;
    padding-left: 0;
}

Позиции с выравниванием по левому краю с центрированным текстом

ul {
    display: inline-block;
    padding-left: 0;
}

Список по центру с смещенным по левому краю текстом

ul {
    display: inline-block;
    padding-left: 0;
    text-align: left;
}

Визуальные элементы