Центриране на куршуми в центриран списък

Пример - http://jstn.info/html.html - гниене на връзката , примерът вече не е наличен.

Забележете, че текстът е центриран, но самите точки не са. Как мога да подравня точките, като същевременно запазя текста/списъка центриран?


html alignment css
person CenterMe    schedule 18.03.2011    source източник
comment
Аз съм на действителната страница, но все още създава същия проблем.   -  person CenterMe    schedule 18.03.2011
comment
Възможен дубликат на Centering ‹UL› + Keeping ‹LI›'s Aligned   -  person Ken Sharp    schedule 07.01.2016

Отговори (4)


arrow_upward
10
arrow_downward

Зададохте същия въпрос в Centering ‹UL› + Keeping ‹LI›'s Aligned и вече ти отговорих.

Дайте на вашия div име на клас center. Ако приемем, че ширината на вашия div е 200px, 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