css中怎么把ul里的字居中而左对齐

css
ul {
  display: flex;
} 

` 中的所有项目都在主轴居中对齐：

css
ul {
  display: flex;
  justify-content: center;
} 

接下来，再设置 `text-align` 属性为 `left`，这将使 `
• ` 中的文字居中，同时又左对齐：

  css
  ul {
    display: flex;
    justify-content: center;
    text-align: left;
  } 

  最后，我们再在 `
• ` 中设置一个 `margin` 值，使列表项目与其他元素之间的间距看起来更协调：

  css
  ul {
    display: flex;
    justify-content: center;
    text-align: left;
  }
  li {
    margin: 0 10px;
  } 

  这样，我们就成功地将无序列表中的文字居中对齐，同时又左对齐了。 参考代码如下：

  html
  <p>HTML 代码：</p>
  <pre>
  <ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
  </ul> 

  CSS 代码：

  ul {
    display: flex;
    justify-content: center;
    text-align: left;
  }
  li {
    margin: 0 10px;
  }