码迷,mamicode.com
首页 > Web开发 > 详细

CSS元素水平居中的方法总结

时间:2016-03-01 20:51:41      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:

行内:text-align:center;

定宽块状:margin:Xpx auto;

不定宽块状:

1.<table> <tbody><tr><td>,然后table即是定宽块状元素

2.display:inline然后当做行内元素处理(存在问题:少了一些功能,比如设定长度值)

3.通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中。

  首先,父div浮起来,其左缘移动到相对于body正中间的位置;然后,子div浮起来,初始位置在其父div处,向左移动相当于父容器50%的距离,如此正好居中。

  float:left;的作用在于使div不再独占一行,而适配其内容的宽度。

CSS元素水平居中的方法总结

标签:

原文地址:http://www.cnblogs.com/leegent/p/5232352.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!