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

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

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

Ответ 1

Вы задали тот же вопрос в Центрирование <UL> + Сохранение <LI> Согласовано, и я уже ответил вам.

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

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

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

Ответ 2

См. fooobar.com/questions/224305/...

ul {
    list-style-position: inside;
}

Ответ 3

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

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

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

Чтобы выяснить, что мы на самом деле сделали здесь, скрываются автоматически созданные пули (путем установки list-style-type на `none) и создаются "псевдопуллы" перед каждым ли.

Ответ 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;
}