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

CSS元素居中

时间:2014-08-11 23:54:03      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:style   http   color   io   ar   html   line   htm   

html中元素分为行内元素和块级元素。采用margin或者float来使元素居中,是比较常见的方法。

margin:0 auto只能用于块级元素,不能使行内元素居中。

参考知乎上为什么「margin:auto」可以让块级元素水平居中?,margin:0 auto,是左右外边距自适应,水平方向的 auto,其计算值取决于可用空间(剩余空间)。元素本身为块级元素,那么水平方向可用空间的距离为其包含盒的宽度(宽度=盒总宽度-(padding-left+padding-right+border-left-width+border-right-width+margin-left+margin-right))。

float:left;margin-left:块级元素或行内元素宽度/2;对块级元素和行内元素均有效,但是行内元素的width需要采用js来计算。

针对行内元素,如果不想采用js计算宽度,可以采用text-align属性来居中。在其父元素上设置display:block;text-align:center;可使行内元素居中显示。对设置了display:inline-block;的行内块元素也适用。

 

CSS元素居中,布布扣,bubuko.com

CSS元素居中

标签:style   http   color   io   ar   html   line   htm   

原文地址:http://www.cnblogs.com/linxuehan/p/3905547.html

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