在使列表左对齐时尝试将我的项目符号放置在页面中间

Question

[尝试将我的要点居中在页面中间，同时使列表左对齐。现在，我的列表看起来像这样。

HTML

<ul style="list-style-type:none;">
  <li><b>exercitation :</b> consectetur adipiscing elit</li>
  <li><b>minima :</b> aliquip ex ea commodo consequat</li>
  <li><b>commodi consequatur:</b> magni dolores eos</li>
</ul>

CSS

ul {
  text-align: center;
  list-style-position: inside;
}

运行下面的代码片段。

ul {
  text-align: center;
  /* When I center this it looks like this whereas I want this in the middle but I want it to be centered and left-align. How do I achieve this? */
  list-style-position: inside;
}

li {
  /* text-align: left; */
}

<ul style="list-style-type:none;">
  <li><b>exercitation :</b> consectetur adipiscing elit</li>
  <li><b>minima :</b> aliquip ex ea commodo consequat</li>
  <li><b>commodi consequatur:</b> magni dolores eos</li>
</ul>

Answer 1

在列表的容器上设置text-align: center;（在这种情况下为body，将列表显示为inline-block，并将列表的内容向左对齐。

body {
  text-align: center;
}

ul {
  display: inline-block;
  list-style-position: inside;
  text-align: left;
}

<ul style="list-style-type:none;">
  <li><b>exercitation :</b> consectetur adipiscing elit</li>
  <li><b>minima :</b> aliquip ex ea commodo consequat</li>
  <li><b>commodi consequatur:</b> magni dolores eos</li>
</ul>

Answer 2

您可以通过将父块添加到ul来进行管理，并且margin: auto;将根据可用宽度设置边距，请找到以下代码段：

ul {
  text-align: left;
  list-style-position: inside;
}

.parent {
    text-align: center;
    margin: auto;
    width: 80%;
}

<div class="parent">

  <ul>
      <li><b>exercitation :</b> consectetur adipiscing elit</li>
      <li><b>minima :</b> aliquip ex ea commodo consequat</li>
      <li><b>commodi consequatur:</b> magni dolores eos</li>
  </ul>
    
</div>