it-swarm.com.ru

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

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

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

22
CenterMe

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

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

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

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

8
Hussein

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

ul {
    list-style-position: inside;
}
130
Davious

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

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

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

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

7
Jacob

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

Я перечислил 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;
}

Визуальные

 enter image description here

0
Sawtaytoes