[分享]css中怎么把ul里的字居中而左对齐

在网页的排版中，有时候我们需要给无序列表 (``) 的项目 ( `` ) 中的文字进行居中处理。然而，如果直接对 `` 元素应用 `textalign: center` 样式，会导致列表中的所有元素都...

在网页的排版中，有时候我们需要给无序列表 (`

`) 的项目 ( `
• ` ) 中的文字进行居中处理。然而，如果直接对 `
  ` 元素应用 `text-align: center` 样式，会导致列表中的所有元素都居中对齐。那么我们如何实现让 `
  ` 中的文字居中，同时又左对齐呢？ 在 CSS 中，有一种叫做 flexbox (弹性盒子布局) 的布局方式，可以方便地解决我们的问题。接下来我们就来看一下实现方法。 首先将 `
  ` 的 `display` 属性设置为 `flex`：

  css
  ul {
    display: flex;
  } 

  然后，设置 `justify-content` 属性为 `center`，这将会使 `
  ` 中的所有项目都在主轴居中对齐：

  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;
  }