资讯专栏INFORMATION COLUMN

CSS中margin: 0 auto;样式没有生效

joywek / 2327人阅读

摘要:问题有两个元素。两则是嵌套关系,是的父节点。当在上设置的时候,并没有在页面中居中。为什么没有生效解决生效,需要一定的前提条件。小结问题出现的原因是,没有给元素设置宽度。

问题:有两个元素: A, B。两则是嵌套关系,A是B的父节点。A和B都是块元素。当在A上设置:margin: 0 auto的时候,B并没有在页面中居中。

margin: 0 auto 为什么没有生效?

 

解决:margin:0 auto;生效,需要一定的前提条件。

1 两者是块元素,即 display: block;

2 父元素需要有宽度,即 width: x px;

3 在有前两者的前提下,设置 margin: 0 auto;即可实现居中。

 

小结:问题出现的原因是,没有给A元素设置宽度。给A元素加上宽度后,B元素就可以居中了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/2022.html

相关文章

  • css的结构与布局

    摘要:实际上表示视口宽度的,而不是。同样,表示视口高度的当视口宽度小于高度时,等于,否则等于。基于的方法这种应该算是最佳的解决办法实现方法当使用布局时,使用在水平和垂直方向都会居中。 1.自适应内部元素 在css中,不给元素一个height值时,元素会自适应其内部的元素高度,有时我们想让元素的宽度也达到此效果,应用场景如下。 如下当前的这种布局,想要改成最外层的div的宽度由当前的图片撑开的...

    GeekQiaQia 评论0 收藏0
  • CSS 公共样式分享

    摘要:格式化样式公共组件样式当前页面样式清除全站所有页面的浏览器默认样式,保证在初始样式在所有浏览器下一致。当前页面样式公共组件以外的所有样式都写到这个样式文件里面,并且保证一个页面一个独立样式,页面和写法要模块化,保证迅速响应项目频繁的迭代。 global.css | reset.css(格式化样式) common.css(公共组件样式) layout.css(当前页面样式) 清除全站所有...

    Cruise_Chan 评论0 收藏0
  • 16种水平居垂直居方法

    摘要:原文链接水平居中若是行内元素给其父元素设置即可实现行内元素水平居中若是块级元素该元素设置即可若子元素包含属性为了让子元素水平居中则可让父元素宽度设置为并且配合作如下设置是中给属性新加的一个属性值它配合可以轻松实现水平居中 原文链接 水平居中 1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.2) 若是块级元素, 该元素设置 margin...

    jerry 评论0 收藏0
  • css学习归纳总结(三)

    摘要:也就是说,较宽的外边距决定两个元素最终离多远。盒模型结论二没有设定属性的元素始终会扩展到填满其父元素的宽度为止。布局的基本概念多栏布局有三种基本的实现方案固定宽度流动弹性。 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: Hello Everyone! 行内样式会覆盖嵌入样式和链接样式。 嵌入样式 嵌入的css样式是放在HTML文档...

    Drummor 评论0 收藏0
  • CSS魔法堂:改变单选框颜色就这么吹毛求疵!

    摘要:前言是否曾经被业务提出能改改这个单选框的颜色吧让它和主题颜色搭配一下吧,然后苦于原生不支持换颜色,最后被迫自己手撸一个凑合使用。设置为的样式行为特征单选框的行为特征,明显就是选中与否,及选中状态的改变事件,因此我们必须保持对外提供事件。 前言  是否曾经被业务提出能改改这个单选框的颜色吧!让它和主题颜色搭配一下吧!,然后苦于原生不支持换颜色,最后被迫自己手撸一个凑合使用。若抛开inpu...

    freecode 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<