ul子弹没有对齐

Question

我一直在尝试使用

<ul style="text-align:center">

  <li> 1794 - born in Berkeley, UK </li>
  <li> 1821 - began his training as a doctor </li>

</ul>

不幸的是，子弹和文本都没有正确对齐，我尝试过使用div但它仍然不起作用。

这就是发生的事情：

这就是我想要的：

Answer 1

如果要将列表保持在页面/父元素的中心，但是列表项与左侧对齐，请将ul标记包装在具有text-align: center;的块容器中，并将ul设置为一个display: inline-block;和text-align: left;。

Answer 2

你想要这个吗？ https://codepen.io/anon/pen/WdyVPJ

代码 HTML

<ul class="list">
  <li class="list-item">1794 - born in Berkeley, UK</li>
  <li class="list-item">1821 - began his training as a doctor</li>
</ul>

CSS

ul {
  text-align: left;
}

li {
  text-align: center;
}

Answer 3

试试这个简单的代码段

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

<ul class="list">
  <li class="list-item">1794 - born in Berkeley, UK</li>
  <li class="list-item">1821 - began his training as a doctor</li>
</ul>

Answer 4

这是因为您必须将内部元素（<li>）居中，同时将左侧外部元素（<ul>）对齐

<ul style="text-align:left">
    <li style="text-align:center"> 1794 - born in Berkeley, UK </li>
    <li style="text-align:center"> 1821 - began his training as a doctor </li>
</ul>

在此处查看结果：https://jsfiddle.net/L1xmkof6/