[分享]css列表内文字左右居中

在CSS中，我们常常需要设置列表内文字的居中方式。下面是一些实现列表内文字左右居中的方法。

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  text-align: center;
} 

使用上述代码，我们可以简单地实现列表内文字居中。需要注意的是，这种方法将列表中所有文字都设置为居中，包括列表项标识（bullet或number）。

如果我们只想设置列表项中的文字居中，而不影响列表项标识的位置，可以使用以下代码：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  display: flex;
  justify-content: center;
  align-items: center;
}
li:before {
  content: "2022"; /* bullet symbol */
  margin-right: 0.5em; /* space between bullet and text */
} 

上述代码中，我们将列表项的display属性设置为flex，然后使用justify-content和align-items属性将文字居中。同时，我们使用:before伪类选择器，将bullet（标识符）插入到列表项文字前面，并设置间距。

总的来说，对于没有特殊要求的普通列表，我们可以选择简单地使用text-align: center方法，而对于有需要的列表，使用flex方法可以更为灵活地控制文字和标识符的位置。