如何优雅的水平居中列表元素的内容？

今天分享的内容来自于 Jeff Starr 的文章《CSS: Center-Align List with Left-Aligned Text (and Unknown Width)》。写网页时，如果要你实现一个水平居中显示的列表该怎么做呢？

text-align: center

首先，最容易想到的就是列表元素直接 text-align: center：

ul {
  text-align: center;
}

看看效果：

为了便于观察，我给这里的 li 标签加了背景。

还不够完美，内容确实居中显式了，但因为没有左对齐，看起来不是很方便。其次，<ul> 上的小圆点，距离列表内容太远了，不是很美观。

默认 <ul> 是 display: block 的，既然是块状元素，我们就可以使用 margin: auto 的方式居中它。

Chrome 中，<ul> 默认的用户代理样式。

ul {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

效果：

这次效果是有了，但是这种方式有一个局限性，就是必须要为列表元素指定一个宽，否则是看不见效果的。

那么，如果内容是动态生成，长度不定的，还如何保证内容居中显示呢？

有一个思路，就是将 <ul> 设置成 display: inlinb-block 的，这样它的宽度默认就是由内容撑开了，接着再对它应用 text-align: center 就行了。

.parent {
  text-align: center;
}

ul {
  display: inline-block;
  text-align: left;
}

效果：

很好！唯一的缺点就是需要引入一个父元素，不过确实实现了我们的优雅水平居中的需求。