inline-block对margin:0 auto无效

最新推荐文章于 2025-03-16 15:29:36 发布
最新推荐文章于 2025-03-16 15:29:36 发布
阅读量779 收藏 2
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43906597/article/details/106848514
版权

为什么inline-block元素使用margin：0 auto不起作用
再次提到上面的考点，这7大属性的值加起来必须是元素包含块的宽度，这里我们假设其他属性均为0，那也就是margin-left + width + margin-right = 包含块的宽度。
所以：

对于块级元素，当width固定后，margin就能通过margin = (包含块的宽度 - width )/2获得取值
而对于inline-block元素（包含行内替换元素比如img等），内容的宽度就是最终的宽度，没有margin-left + width + margin-right = 包含块的宽度这一限制，所以当margin被设置为auto时，它并不知道要取什么值，就默认为0了，这和为什么垂直方向上不能设置auto是一样的道理。

基于inline-block进行自适应列表布局
吴小花的博客
04-12 1583
1.block,inline和inlinke-block细节对比 ● display:block a. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。 b. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。 c. block元素可以设置margin和padding属性。 ...
img图片之间的间隙、inline-block元素之间的间隙
余光的博客
11-08 834
inline-block常见问题场景 img图片与图片之间会有莫名的空隙 同一行的元素之间会有空隙 inline-block的诞生原因 在CSS中： 块级对象元素会单独占一行显示，多个block元素会各自新起一行，并且可以设置width,height属性； 内联对象元素前后不会产生换行，一系列inline元素都在一行内显示，直到行排满，对inline元素设置width,height属性无效...
inline-block的margin设置无效
kalinux的博客
12-12 3780
inline-block元素之间不可以有空格（换行），例如： <span></span> <span></span> <span></span> 设置margin时是无效的，修改成这样就可以了： <span></span><span><
html中的inline-block(image等)元素为什么不能使用margin:auto
qinli15751009359的博客
05-13 1459
inline-block行内块元素为什么不能使用margin:auto,那么先来了解一下块级元素为什么能使用。 块级元素的水平属性，块级元素在水平方向上有7大属性，margin-left、border-left、padding-left、width、padding-right、border-right和margin-right，这7大属性的值加起来必须是元素包含块的宽度， 这7个属性中，只有3个属性可以设置为auto：margin-left、width、margin-right，其余属性必须设定为特定的值，
为什么margin: 0 auto；可以让块级元素居中
最新发布
wangjingya0605的博客
03-16 267
我们用margin来设置盒子之间的距离，是因为它专门用来“隔开”盒子，很灵活，不会让盒子变大，而且还有自己的特点，就是它会“合并”。比如，两个盒子上下挨着，它们的margin会自动合并成一个，这样就不会出现多余的空隙。想象一下，你有一个很长很长的桌子，上面放了一块很大的木板。但如果你告诉木板：“你只能占桌子中间的960厘米”，那么这块木板就有了一个固定的大小，你可以把它放在桌子的中间位置，两边都留出空隙。所以，给它一个固定的宽度（比如960px），就相当于给它画了一个边界，它就不会再撑满整个容器了。
ie67 display:inline-block 失效解决方法
weixin_30500663的博客
02-28 411
先将其转化为块状，在转化为inline,*号为css hcak,代表针对IE67 display: inline-block; *display: block; *display: inline; 转载于:https://www.cnblogs.com/zzd0916/p/6478752.html...
display:inline-block在IE6/Ie7和IE8中的区别
WEBCODE
09-13 176
转载:http://hi.baidu.com/minmin_devil/blog/item/74e603226cedd148ad34de14.html 在IE6、IE7中不识别display:inline-block属性，但使用inline-block属性在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。从上面的分析也不难理解为什么IE6...
当inline-block或者float失效的时候怎么弄
xiaozhen0610的博客
07-18 948
当我们想要元素水平排列的时候，inline-block或者float是最好的选择了，但是当父元素的宽高都设置了的时候，子元素会失效，如下： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0;
display属性理解： inline ， block， inline-block+BFC格式上下文、盒模型
hhhh
04-28 677
display的常用的属性值，inline ， block， inline-block 块级元素 总是从新行开始 width、height、margin、padding都可以控制 宽度默认是页面的100% 可以容纳内联元素和其他块元素 <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> <di
margin:0 auto与text-align:center的基本概念及区别介绍
09-25
4. 试图为内联元素如`<img>`设置`margin`属性通常无效，除非将其转换为块级元素或内联块级元素，例如`display:block`或`display:inline-block`。 了解这些基础知识对于进行网页布局至关重要。区分块级元素和内联...
为什么对图片无法使用margin:0 auto；来进行居中？
ziyi6666的博客
03-08 1657
针对如题问题，可能很多小伙伴都遇到过。 当我们进行网页开发时，如果想要一张类似于海报的图片居中显示时，我们首先想到的就是将其添加样式：margin:0 auto;可是却不能成功，这是为什么呢？接下来我们来根据如下例子来探索这个美妙的问题吧！ 第一步：我们先将如下代复制到代码编辑器里 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equ
关于IE7的display:inline-block失效问题
soos的博客
06-14 1046
有时候我们必须要有display：inline-block;属性，但是IE7并不支持，这是开发过程中经常会遇到的问题，下面特意记录一下以便后期使用： 解决IE7不支持display：inline-block问题： .selector{ display:inline-block; *display:inline; *zoom:1; } 注意：zoom:1是必须的。
块级元素display:inline-block 在IE6 IE7无效
weixin_30644369的博客
11-20 89
ie6,ie7中，对块级元素设置display:inline-block，无效。 所以要先设置为inline,再触发haslayout .div1{ /*重点代码开始*/ display: inline-block;//针对一般浏览器 *display: inline;//针对ie6、ie7 *...
深入研究display:inline-block在浏览器中的应用
weixin_34375233的博客
04-13 97
写在前面的话，在我开发CSS的过程中，我发现很多诡异的问题都是对概念理解有偏差，所以在每篇开始的时候，我都把W3c的解释拿出来晒晒。个人经验，很多的问题看看W3C一般都能够解决，W3C是最好的参考书。 官方解释：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 按照这个解释：支持的浏览器有（ie8,ie9,chrome,firefox3.6+,由于我...
解决 IE7 中 display:inline-block 失效的问题
weixin_30507269的博客
09-18 198
我们在做首页菜单选项的时候，通常会用 li 标签去做，通过对 li 标签设置样式: display:inline-block 可以让 li 标签横排显示。但是这样做，在 IE7 浏览器下面会有一个兼容性问题： display:inline-block 不会被识别。 　　如在下面的 html 结构中： <ul class="nav"> <li>&l...
关于inline-block在IE8下无效的解决方法
weixin_34122810的博客
10-28 199
<style> .divClass{ width:500px; border:1px solid #ccc; } /*IE8下可以不用加（*zoom:1;*display:inline;需要添加在display后面）*/ .divClass span{...
inline-block标签元素不可以使用margin: 0 auto;
lu10505的博客
01-06 592
margin: 0 auto; 原意用于水平居中对齐，所以必须要得到自身的宽度才能定下自身在父级中居中的位置（此宽度必须为确切数值，默认为0），由于inline-block元素是块级元素，所以自己本身的宽度取决于内容本身的宽度，但是这个宽度并不是确切数值，所以代码在搜寻的时候不知道该给多少宽度，就选取了默认的0，导致居中失效。 解决方法： 情况简单（例如兄弟级别只有一个inline-blo...
为什么margin:0 auto不能用于inline-block元素
ZHgogogoha的博客
03-23 642
块级元素的水平属性 块级元素在水平方向上有7大属性，margin-left、border-left、padding-left、width、padding-right、border-right和margin-right。 这7大属性的值加起来必须是元素包含块的宽度（这一点记住，一会要考????）。 这7个属性中，只有3个属性可以设置为auto：margin-left、width、margin-right，...
css: display:inline-block的几个问题
07-18 704
display:inline-block使用起来有几个问题，这里总结一下。 1.inline-block元素即使没有内容，父元素也会被撑开. 用以下代码设置元素样式： 效果： 虽然内部的div没有任何内容，而且审查元素的高度为0，但是父元素被撑开了。 原因： inline-block的元素 没有内容的时候，父元素会根据 font 产生一个 line
text-align: center;无效
01-31
### 解决方案 对于 `text-align: center` 在某些浏览器中不生效的情况，可以考虑采用其他方法来实现水平居中效果。一种推荐的方法是利用表格自动边距特性： ```css table { margin-left: auto; margin-right: auto; } ``` 这种方法适用于块级元素，并能有效解决不同浏览器之间的兼容性问题[^2]。 如果目标是非表格元素，则可以通过设置父容器的宽度并应用自动外边距的方式达到相同的效果： ```css .parent-container { width: 100%; } .centered-element { display: block; margin-left: auto; margin-right: auto; } ``` 当处理内联或行内块状元素时，除了使用 `text-align: center` 外，还可以通过组合 `inline-block` 和 `vertical-align` 属性使子元素垂直和水平方向都处于中间位置[^3]： ```html <div style="text-align:center;"> <span class="icon middle"></span> <span class="middle">Centered!</span> </div> <style> .icon, .middle { display: inline-block; vertical-align: middle; } </style> ``` 需要注意的是，`vertical-align` 只影响那些设置了 `display` 值为 `inline`, `inline-block` 或者 `table-cell` 的元素[^4]。 另外，在现代布局技术下，也可以借助 Flexbox 来轻松完成这一任务而无需担心旧版浏览器的支持情况： ```css .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中（可选）*/ } ``` 此方法不仅能够很好地支持文本内容的居中排列，而且还能灵活应对各种复杂的页面结构需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值