为什么用margin：0 auto无效？

原创 已于 2022-11-24 15:56:36 修改 · 2.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5

于 2022-11-21 19:51:57 首次发布
本文探讨了块级元素与内联元素在设置margin时的区别，分析了子元素为块级元素时，未设置宽度导致margin失效的原因，并提供了解决方案。

1.给父元素设置这类margin 需要子元素是块级元素 displayinline/inlineblock都不行

2.子元素如果是块元素 则可能是没有设置宽度 块级元素默认宽度是屏幕宽度 所以没有宽度会导致无效

 

ps：当不知道盒子的问题出在哪里时 考虑给他➕border 便于观察和调整

解决办法之一是给父级盒子设置display：flex 那么子元素的margin 0 auto就可以起作用了

webdowhatIlike
关注
为什么对图片无法使用margin:0 auto；来进行居中？
ziyi6666的博客
03-08 1719
针对如题问题，可能很多小伙伴都遇到过。 当我们进行网页开发时，如果想要一张类似于海报的图片居中显示时，我们首先想到的就是将其添加样式：margin:0 auto;可是却不能成功，这是为什么呢？接下来我们来根据如下例子来探索这个美妙的问题吧！ 第一步：我们先将如下代复制到代码编辑器里 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equ
使用绝对定位position:absolute；后，就不能使用margin: 0 auto；实现居中，为什么呢？如何解决？
王铁柱666的博客
04-06 520
的元素）进行定位，如果没有已定位的父元素，则会相对于初始包含块（通常是视口或页面本身）进行定位。在绝对定位元素上不起作用，因为绝对定位元素没有“自动”的边距空间可计算——它们的位置是固定的。如果你可以控制父元素的样式，并且希望多个子元素都居中，可以使用flexbox。属性将元素自身的中心点移动到该位置，从而实现水平和垂直居中。这四个属性来确定位置的，而不是像普通文档流中的元素那样根据。这种方法通过将元素的左上角移动到其父容器的中心，然后使用。如果元素的尺寸是已知的，你可以使用CSS变量和。
html中使用margin:0 auto整个页面不居中的解决方法
09-28
div style=margin:0 auto这个属怎么弄都不能让页面居中展示，原因是L-Blog默认没有在HTML前加上DTD，于是IE就以HTML而不是XHTML来解释文档
margin 0 auto 什么意思
梁同学与Android
11-12 2万+
今天在写h5的时候遇到了居中的问题(网页自适应)，让后就上网上查了相关的资料，顺便整理一下margin中两个参数的意思: margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right 因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中） ...
关于margin:auto的注意点
最新发布
2301_81854535的博客
10-10 780
要理解 的生效条件，核心是抓住它的本质规则： 仅在「弹性布局（flex）」或「网格布局（grid）」中，才能实现“自动分配剩余空间”的效果；在默认的流式布局（static）中完全不生效。你的代码中注释 后 失效，正是因为脱离了弹性布局环境。 的行为在不同布局模式下完全不同，只有在以下两种布局中，它才具备“自动推挤元素、分配剩余空间”的能力：当父元素设置 或 后，子元素的 会触发“剩余空间分配”逻辑：代码中， 父元素原本的逻辑是： 当注释 后，父元素回到默认的「流式布局」， 自然失效。父元素设置
CSS——margin : 0 auto;
u012194956的博客
04-04 3152
1. margin : 0 auto表示啥？表示上下外边距为0，左右外边距自适应。也可以拆分为：margin ： 0 auto 0 auto；（上 右 下 左）。单独写的话，可以拆分成：margin-top：0；margin-right：auto；margin-bottom：0；margin-left：auto；2.margin：0 auto的作用是啥？一般是用在外层div上的属性。为了让div在...
margin：0 auto无效原因
weixin_44501490的博客
03-09 4747
1、没有给要居中的元素设置宽度 2、该元素position值为absolute 3、该元素设置了浮动属性 几点说明： 对于有上下边偏移的相对定位的盒子，margin auto是有效的。 对于有左右边偏移的相对定位的盒子，margin auto也是有效的，只是在居中的基础上会偏差一个left或right值。当left或right为0时，水平居中。 当div宽高都设置了百分比，又设置margin：0...
margin:0 auto没效果是什么原因
qq_44176252的博客
03-03 8049
首先进行了一个html的布局，一个div标签分别包含行内标签和块级标签，我想在居中的元素里再使用margin：0 auto居中。 第二步给div,p,span三个属性进行添加css样式，同样是添加了margin：0 auto，但只有div居中 效果如下： 第三步：问题所在，后来发现， 1.如果当前元素没有设置宽高属性的情况下，margin:0 auto是不起任何效果的； 2.如果当前元素使用百分比设置宽高，margin:0 auto同样不起效果 3.如果是行内元素，需要先转化为块级元素，注行内块不行，
为什么margin:auto 0无效
06-06
margin:auto 无效的原因可能是因为该元素的父元素没有设置宽度，或者该元素的display属性不是块级元素。如果父元素没有设置宽度，那么该元素的margin:auto就无法生效，因为它不知道应该在哪个位置居中。如果该元素的...
margin:0 auto与text-align:center的基本概念及区别介绍
09-25
3. 使用`margin:0 auto`可以使元素在容器中水平居中，但必须确保元素具有固定的宽度，并且`margin:0 auto`应用于元素自身，而非父元素。 4. 试图为内联元素如`<img>`设置`margin`属性通常无效，除非将其转换为块级...
为什么margin: 0 auto对行内元素无效
04-21
这是因为margin: 0 auto 只对块级元素有效。行内元素的宽度由它的内容决定，所以无法设置左右居中。若想要实现行内元素的水平居中，可以将其设置为块级元素，或者使用text-align属性将其父元素的文本内容居中。
margin:0 auto不生效的原因
weixin_46353030的博客
02-24 1040
参考文章：http://www.noobyard.com/article/p-zxrpdvzj-sa.html
margin:0 auto居中无效
weixin_30722589的博客
08-05 279
让最外层DIV在IE浏览器中水平居中，除了对其设置margin:0 auto外，一般还要对body设置样式，但一般高版本浏览器无须设置此css样式也能使DIV居中，低版本IE比如IE6和对标准比较严格浏览器需要设置text-align:center。 有时不经意对要居中的最外层设置float:left或float:right也是造成设置margin:0 auto布局不能水平居中原因。 因为设置...
css设置position后为什么margin:0 auto； 失效了
staunch_firm的博客
05-30 386
只对非定位元素起作用，它依赖于块级元素的自身宽度和父元素的宽度来实现水平居中。或者使用 flex 布局等。具体的实现方法取决于你的布局需求和具体的元素结构。属性后仍然实现水平居中，可以使用其他方法，例如设置。属性时，它就成为了一个“定位元素”，此时。如有更多问题，请随时提问。不再能够水平居中该元素。当你为一个元素设置了。
css margin:0 auto 不起作用？
Adrian_Liao的博客
02-28 2628
在使用margin: 0 auto;时期望内容居中，但未实现，代码如下： <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.mi...
margin：0 auto；失效的原因
depers15的博客
06-19 4856
怎样设置水平居中？ .temp{ margin: 0 auto; }若上述方法出错的原因： 1.要给居中的元素一个宽度，否者无效。2.该元素一定不能浮动，否者无效。3.在HTML中使用标签，需考虑好整体构架，否者全部元素都会居中的。 如果还有错误是什么原因呢? 这个的解决方法就是新建一个新的div元素，这样就可以避免该方法失效！
margin: 0 auto; 元素水平居中布局无效
PT - Blog
04-25 1万+
margin: 0 auto; 元素水平居中布局无效
margin:0 auto为什么会失效
得之我幸
06-19 1万+
1.没有指定宽度 解决：设置width 结论：分别给要居中的元素添加了指定宽度，没变化，说明不是这个原因 2.浮动、绝对定位、固定定位的盒子失效 结论：看不见有这方面的设置啊，排除 3.行内元素失效 解决方法：①设置display:block；②给定要居中的行内元素的宽度。（自带宽度的input/button等元素无需设置宽度） 结论：我设的div啊，排除 4.display:table-cell...
【CSS】margin:0 auto;——使用条件/应用场景/不生效无效果的原因
热门推荐
weixin_39068791的博客
06-09 6万+
margin:0 auto；在不同场景下生效条件如下：         块级元素：给定要居中的块级元素的宽度。         行内元素：①设置display:block；②给定要居中的行内元素的宽度。（行内元素设置成块级元素后可以对其宽高进行设置）         行内块元素：设置display:block。（如input、button、img等元素，自带宽度可以不用设置其宽度）   ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值