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

V2EX = way to explore

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

For Existing Member Sign In

Can I use?

http://caniuse.com/

Less

http://lesscss.org

Cool Libraries

Bootstrap from Twitter

Jetstrap

This topic created in 4636 days ago, the information mentioned may be changed or developed.

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

圆点

图片

居中

5 replies 1970-01-01 08:00:00 +08:00

lichao

Aug 20, 2013

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

/table>

kfll

Aug 20, 2013

<!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

Aug 20, 2013

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

chairuosen

Aug 20, 2013

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

veraucio

Aug 20, 2013

display: inline-block;