本文介绍了在CSS布局中如何使用span标签实现布局，利用display:inline-block进行水平居中，以及在不清除浮动的情况下让内容撑开盒子的方法。总结了三种不设置父级元素宽高的内容水平居中策略：固定宽高的margin auto居中，绝对或相对定位调整margin，以及使用display:inline-block结合text-align:center实现居中。并提供了相关代码示例。
总结
1.这里用了span标签来布局。span是行内元素，因为要设置它宽高，所以就把它变成了行内块元素。
2.display为inline-block的元素在水平方向上之间会有间隙因为换行和空格的影响；所以我在结构那里没有换行。
3.我不想给父级元素设置宽高，想让内容撑开盒子，所以要清除浮动。用了clear: both;
4.父级元素没有宽高，但是又想盒子居中，所以加了text-align: center;行内元素或者行内块元素水平居中给其父级元素添加text-align: center;
如果不想给父级元素设置宽高又想内容水平居中？
下面是网上找到的一些方法。
第一种，如果有固定的宽高。用一个和所有浮动盒子等宽的大盒子包裹起来，然后设置大盒子的margin:0 auto;就可以水平居中。需要注意大盒子的宽除了要包括里面盒子的总宽外还要包括每个盒子的外边距，内填充，边框等。还有大盒子里面所有元素浮动之后，大盒子的高度消失的问题。
第二种，使用绝对或相对定位。还是用一个大盒子包裹起来，大盒子的position设置成absolute或者relative，然后大盒子的left为50%，margin-left设置为负的大盒子宽度的一半，这也需要知道大盒子的宽度。
第三种，不需要设置任何宽度。所有盒子不使用浮动，而使用display:inline-block;来使盒子在一行显示，然后设置父元素的text-align:center;来使子元素居中。父元素需要占整个一行，并且每个盒
最低0.47元/天 解锁文章
503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
