Центр выравнивания неупорядоченного списка с маркерами в Bootstrap

Question

Я хочу выровнять по центру неупорядоченный список в Bootstrap - пули включены

ul {
  list-style-type: disc !important;
  padding-left: 1em !important;
  margin-left: 1em;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<ul class="text-center">
  <li class="text-center">This</li>
  <li>is</li>
  <li>my</li>
  <li>list</li>
</ul>

К сожалению, при обоих значениях class= "text-center" текст списка выравнивается по центру, но маркеры застряли в левой части экрана.

Как сделать так, чтобы пули были выровнены по центру?

Answer 1

Вы можете использовать свойство list-style-position:

list-style-position: inside;

ul {
  list-style-type: disc !important;
  padding-left: 1em !important;
  margin-left: 1em;
}
li {
list-style-position: inside;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<ul class="text-center">
  <li>This</li>
  <li>is</li>
  <li>my</li>
  <li>list</li>
</ul>

Answer 2

Измените свой код на этот

HTML:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<ul>
  <li>This</li>
  <li>is</li>
  <li>my</li>
  <li>list</li>
</ul>

CSS:

ul {
  display: table;
  margin: 0 auto;
}

Таблица отображения будет заботиться о размере блока на основе внутреннего значения и поляавто будет централизованный раздел.

Answer 3

Вы можете использовать flex для достижения этой цели:

.custom-center {
  display: flex;
  align-items: center;
  flex-direction: column;
}

ul {
  list-style-type: disc !important;
  padding-left: 1em !important;
  margin-left: 1em;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="custom-center">
<ul class="text-center">
  <li class="text-center">This</li>
  <li>is</li>
  <li>my</li>
  <li>list</li>
</ul>
</div>

Answer 4

У вас есть два варианта, по сути, проблема в том, что маркеры являются частью элемента ul и поэтому отображаются в начале каждой новой строки и не связаны с li. Из-за этого, даже если вы расположите список по центру, маркеры будут выровнены вместе, а не относительно длины вашего элемента списка.

Я скопировал ваш код сверху. И, как вы можете видеть, добавив элемент-обертку с flex и установив поле left / right mx-auto для элемента ul. Однако возникает проблема, описанная выше, когда все точки выровнены, но центрированы, но относительно самой длинной линии.

ul {
  list-style-type: disc !important;
  padding-left: 1em !important;
  margin-left: 1em;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="d-flex">
    <ul class="text-center mx-auto">
      <li class="text-center">This</li>
      <li>is</li>
      <li>my</li>
      <li>list</li>
      <li>a bit longer item</li>
    </ul>
</div>

Другим решением будет использование псевдоэлементов в самих элементах списка для создания точек и установка list-style: none для удаления маркеров, сгенерированных браузером. .

Answer 5

Вот код, который может решить эту проблему для вас:

<div class="text-center">
   <ul>
     <li>This</li>
     <li>is</li>
     <li>my</li>
     <li>list</li>
   </ul>
</div>