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

·  阅读 694

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

text-align: center

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

ul {
  text-align: center;
}
复制代码

看看效果:

image.png

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

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

margin: auto

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

image.png

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

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

效果:

image.png

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

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

display: inline-block

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

.parent {
  text-align: center;
}

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

效果:

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

相关链接

(完)

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改