首页 > 代码库 > CSS元素居中
CSS元素居中
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;的行内块元素也适用。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。