初学前端请教一个问题：由内容撑开的块级元素如何居中？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 4102 天前的主题，其中的信息可能已经有所发展或是发生改变。

今天要写一个图片幻灯，图片下方居中位置有几个圆点来作为切换图的TAB。
圆点数量是要随图片张数变的，所以不能用固定宽度margin auto来做，圆点是CSS写的，所以不能转成行级用text-align。
请问该如何做？不用JS

圆点

图片

居中

5 条回复 • 1970-01-01 08:00:00 +08:00

lichao

2013-08-20 20:00:01 +08:00

原点外面包个 div，然后在这个 div 上写 CSS：text-align: center;

kfll

2013-08-20 20:03:31 +08:00

<!Doctype html>
<meta charset="UTF-8">
<style>
p { text-align: center; }
i { background-color: #f90; font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 9px 9px rgba(255, 255, 255, .2); }
</style>
<p>
<i> </i>
<i> </i>
</p>

kfll

2013-08-20 20:05:21 +08:00

https://gist.github.com/kfll/6280540

chairuosen

2013-08-20 20:17:39 +08:00

@kfll 原来如此，之前一直用固定高宽，一变inline就瘪了。。。原来可以用空格+padding撑开行级元素。。就是有点不好算高宽

veraucio

2013-08-20 21:30:50 +08:00

display: inline-block;