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

2013-08-20 19:27:18 +08:00
 chairuosen
今天要写一个图片幻灯，图片下方居中位置有几个圆点来作为切换图的TAB。
圆点数量是要随图片张数变的，所以不能用固定宽度margin auto来做，圆点是CSS写的，所以不能转成行级用text-align。
请问该如何做？不用JS
4180 次点击
所在节点    CSS
5 条回复
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>&nbsp;</i>
<i>&nbsp;</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;

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/79669

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX