html - 在 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>