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

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

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


html alignment css
person CenterMe    schedule 18.03.2011    source источник
comment
Я нахожусь на реальной странице, но она по-прежнему вызывает ту же проблему.   -  person CenterMe    schedule 18.03.2011
comment
Возможный дубликат Центрирование ‹UL› + сохранение выравнивания ‹LI›   -  person Ken Sharp    schedule 07.01.2016

Ответы (4)


arrow_upward
10
arrow_downward

Вы задали тот же вопрос в разделе Центрирование ‹UL› + сохранение выравнивания ‹LI› а я тебе уже ответил.

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

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

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

person Hussein    schedule 18.03.2011
comment
Теперь вы можете использовать margin: 0 auto; display: table;. - person wazz; 10.08.2017

arrow_upward
132
arrow_downward

См. https://stackoverflow.com/a/6558833/507421.

ul {
    list-style-position: inside;
}
person Davious    schedule 28.11.2012
comment
Хотя это работает, это также мешает центрированию. Я думаю, что display: inline-block на ul может лучше справляться с центрированием так, как вы ожидаете, в зависимости от ваших потребностей. - person Kevin Ghadyani; 17.01.2019

arrow_upward
8
arrow_downward

Проблема в том, что пули контролируются 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.

person Jacob    schedule 18.03.2011

arrow_upward
3
arrow_downward

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

Здесь я перечислил 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;
}

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

введите здесь описание изображения

person Kevin Ghadyani    schedule 16.01.2019
comment
Это лучший ответ, который я нашел до сих пор, и он хорошо показывает возможности - person user21398; 15.12.2020