it-swarm.com.ru

как получить маркеры <ul> по центру с текстом?

Когда я пытаюсь центрировать <ul> текст в центрах <li>, но маркеры остаются в крайнем левом углу страницы. Есть ли способ заставить точки маркера оставаться с текстом, когда он находится по центру?

#abc{text-align: center; }

<div id="section1">
<div id="abc">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div/>
<div/>
14
a person

Добавьте list-style-position: inside к элементу ul. (пример)

Значением по умолчанию для свойства list-style-position является outside.

ul {
    text-align: center;
    list-style-position: inside;
}
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

Другой вариант (который дает немного отличающиеся результаты) - центрировать весь элемент ul:

.parent {
  text-align: center;
}
.parent > ul {
  display: inline-block;
}
<div class="parent">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</div>

23
Josh Crozier

Вы можете сделать это с list-style-position: inside; в элементе ul:

ul {
    list-style-position: inside;
}

См рабочую скрипку

12
Michael P. Bazos

Я нашел ответ сегодня. Может быть, уже слишком поздно, но все же я думаю, что это намного лучше. Отметьте это https://jsfiddle.net/Amar_newDev/khb2oyru/5/

Попробуйте изменить код CSS: <ul> max-width:1%; margin:auto; text-align:left; </ul>

max-width: 80% или что-то в этом роде.

Попробуйте поэкспериментировать, вы можете найти что-то новое.

1
Amar Parajuli