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

今天分享的内容来自于 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> 上的小圆点，距离列表内容太远了，不是很美观。

margin: auto

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

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

ul {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}
复制代码

效果：

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

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

display: inline-block

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

.parent {
  text-align: center;
}

ul {
  display: inline-block;
  text-align: left;
}
复制代码

效果：

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

相关连接

• CSS: Center-Align List with Left-Aligned Text (and Unknown Width)，by Jeff Starr
• 在线 demo 地址

（完）