为什么margin:0 auto不能用于inline-block元素

最新推荐文章于 2022-03-06 09:18:33 发布
转载 最新推荐文章于 2022-03-06 09:18:33 发布 · 356 阅读 · 2 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/youhong/p/11135242.html

本文深入探讨了为何margin:0 auto对图片不生效的原因，解释了块级元素与inline-block元素在水平居中上的差异，并提供了正确的解决方案。

前言：今天一个实习生问我，为什么他对图片使用了margin:0 auto，但图片却没有居中，我让他换成对父元素使用text-align:center即可。为什么margin:0 auto对图片不起作用，这是以前入门的时候看《css权威指南》知道的，后来一直这么用，突然有点忘记为什么了。于是又去翻了下书，这里分享下自己的理解。

块级元素的水平属性

块级元素在水平方向上有7大属性，margin-left、border-left、padding-left、width、padding-right、border-right和margin-right。

  • 这7大属性的值加起来必须是元素包含块的宽度（这一点记住，一会要考?）。

  • 这7个属性中，只有3个属性可以设置为auto：margin-left、width、margin-right，其余属性必须设定为特定的值，或者默认为0.

    Q: 延伸一下：为什么垂直方向上不能设置auto呢？
    A: 我自己的理解是，因为目前的网页是按照人的习惯来的，水平方向的最大宽度有所限制（为包含块的宽度），而垂直方向的高度根据内容的高度来定，且可以一直延伸滚动；因此，水平方向有了最大值的限制，auto才有意义，auto=总和-已知；而垂直方向上可以无限延伸，此时如果要有的auto话，就是auto=无穷大-已知=无穷大，没有意义。

为什么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是一样的道理。

小结

以上内容用一句话概括就是，auto是基于总宽度-已知固定宽度获得取值的，inline-block元素水平方向的7大属性没有总宽度的限制，所以margin设置为auto时，不知道如何取值，所以默认为0，于是便没有起到我们想要的居中的效果。
（ps:对于auto在不同情况下如何表现比较疑惑的话，可以看看《css权威指南》的P171-P173）

转载于:https://www.cnblogs.com/youhong/p/11135242.html

img图片之间的间隙、inline-block元素之间的间隙
余光的博客
11-08 855
inline-block常见问题场景 img图片与图片之间会有莫名的空隙 同一行的元素之间会有空隙 inline-block的诞生原因 在CSS中： 块级对象元素会单独占一行显示，多个block元素会各自新起一行，并且可以设置width,height属性； 内联对象元素前后不会产生换行，一系列inline元素都在一行内显示，直到行排满，对inline元素设置width,height属性无效...
margin:0 auto与text-align:center的基本概念及区别介绍
09-25
4. 试图为内联元素如`<img>`设置`margin`属性通常无效，除非将其转换为块级元素或内联块级元素，例如`display:block`或`display:inline-block`。 了解这些基础知识对于进行网页布局至关重要。区分块级元素和内联...
使用inline-block导致其他元素无法居中
u010218033的专栏
11-12 2315
今天遇到使用两个display:inline-block的div无法对齐的问题，情况如下。查了下发现两个并列的inline-block默认是基线对齐的，可通过设置vertical-align进行顶部对齐。 css代码： *{ margin: 0px; padding: 0px; } div{ display: inline-block;
display:inline-block的icon不垂直居中问题
热门推荐
夏天的甲虫
09-07 1万+
需要了解知识点： 1、基线：基线并不是汉字的下端沿，而是英文字母x的下端沿； 2、行高指的是文本行的基线间的距离； 图片来源链接地址！ 进入正题： 父元素设置line-height后，看似文本垂直居中对齐，而inline-block的icon并没有与文字对齐，如下图，因为默认的垂直对齐方式为vertical-align: baseline;这种对齐方式下，元素以基
inline-block实现元素水平居中
wenster1993的博客
07-27 2451
demo<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul { list-style: none outside none; paddin
已知宽度的DIV水平居中的3种方法
我是要成为技术的女生
04-19 925
这里的居中不是指div内的元素居中，而是指整个div居中。 方法1： 设置div的宽度，并且设置margin: 0 auto;  方法2： 还在摸索中
inline-block内的子元素居中问题
FA的博客
11-11 1461
场景：黑色div设置了inline-block，子元素红色div水平排列 需求 1.如果需要红色div垂直水平居中，如上图，需要在黑色div中多加个属性 vertical-align: middle; 2.临时需要加一个圆，这个圆需要在红色div正中间，如果通过margin去调会发现，在响应拉动水平width的情况下，他是不会居中的，因为红色div有时候比蓝色div小，有时候比它大，这时候就很难动态设定 所以需要对蓝色div做以下处理 left: 50%; top: 50%; z-index: 10.
css解决display:inline-block;产生的缝隙（间隙）的方法
09-27
在CSS布局中，`display: inline-block` 是一个常用的属性，它允许元素以行内元素的方式排列，同时具有块级元素的部分特性，如指定宽度和高度。然而，使用`display: inline-block` 时，元素之间往往会出现一些...
使用display:inline-block居中没有宽度的元素
01-21
还可以利用自动外边距(margin:0 auto;)来居中元素.这些方法的问题在于，要居中的元素必须是有宽度的.像这里用于构成菜单的html列表，他可能是根据数据库信息动态生成的，或者说将来有可能手工编辑，总之你不可能提前...
CSS中使用inline-block来进行居中的示例
09-25
`display: inline-block`属性允许一个元素表现得像一个内联元素（即不换行显示），同时又具有块级元素（如div）的特性，如设置宽度、高度等。这种特性使得`inline-block`成为居中对齐的一种实用方法，尤其是当元素...
div设置为行内块元素后出现缝隙问题
Irene_wyn的博客
11-26 815
如图，将两个div设置为inline-block后在同一行显示，盒子之间出现缝隙： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box1{ display: inline-block;
HTML理论练习题(四)
欣欣酱博客
03-06 1465
1.以下哪些HTML元素可以获得焦点？ <div contenteditable="true">我可以</div> <p tabindex="1">我可以</p> <a id="yes">我可以</a> <input type="text" value="我可以" /> 解析：contenteditable为true时可以，为false时不可以；tabindex=0|1|x,当为0时按下tab键不可以获取焦
inline-block对margin:0 auto无效
斜杠青年博客
06-19 794
为什么inline-block元素使用margin：0 auto不起作用 再次提到上面的考点，这7大属性的值加起来必须是元素包含块的宽度，这里我们假设其他属性均为0，那也就是margin-left + width + margin-right = 包含块的宽度。 所以： 对于块级元素，当width固定后，margin就能通过margin = (包含块的宽度 - width )/2获得取值 而对于inline-block元素（包含行内替换元素比如img等），内容的宽度就是最终的宽度，没有margin-left
inline-block标签元素不可以使用margin: 0 auto;
lu10505的博客
01-06 611
margin: 0 auto; 原意用于水平居中对齐，所以必须要得到自身的宽度才能定下自身在父级中居中的位置（此宽度必须为确切数值，默认为0），由于inline-block元素是块级元素，所以自己本身的宽度取决于内容本身的宽度，但是这个宽度并不是确切数值，所以代码在搜寻的时候不知道该给多少宽度，就选取了默认的0，导致居中失效。 解决方法： 情况简单（例如兄弟级别只有一个inline-blo...
inline-block的margin设置无效
kalinux的博客
12-12 3797
inline-block元素之间不可以有空格（换行），例如： &lt;span&gt;&lt;/span&gt; &lt;span&gt;&lt;/span&gt; &lt;span&gt;&lt;/span&gt; 设置margin时是无效的，修改成这样就可以了： &lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;
div的display:inline-block和margin:0 auto不兼容
飞翔的熊blabla
04-24 907
div的display:inline-block和margin:0 auto居中不兼容 div只能配合display:block 和 witdh后才能用margin:0 auto居中
float: left; margin: 0 auto; display:inline-block;三者的之间的纠葛
TestGreeting的博客
03-13 1908
float: left; margin: 0 auto; display:inline-block;三者的之间的纠葛
display: inline-block;这段代码什么意思
最新发布
06-20
### CSS 属性 `display: inline-block` 的含义 `display: inline-block` 是一种 CSS 显示模式，它结合了 `inline` 和 `block` 元素的特性。具体来说，使用 `inline-block` 的元素具有以下特点： #### 1. 行内特性 - `inline-block` 元素与 `inline` 元素类似，不会独占一行，多个 `inline-block` 元素可以在同一行显示[^1]。 - 它们会根据文档流排列，与其他行内元素保持在同一水平线上[^1]。 #### 2. 块级特性 - 尽管 `inline-block` 元素在布局上类似于行内元素，但它仍然可以设置宽度（`width`）、高度（`height`）、内边距（`padding`）和外边距（`margin`），就像块级元素一样[^3]。 - 这种特性使得 `inline-block` 元素能够在不影响其他行内元素的情况下，精确控制其尺寸和间距。 #### 3. 垂直对齐支持 - `inline-block` 元素支持 `vertical-align` 属性，这允许开发者调整元素相对于父容器或相邻元素的垂直对齐方式。例如，可以使用 `vertical-align: middle;` 将元素垂直居中对齐。 #### 示例代码 以下是一个简单的 HTML 和 CSS 示例，展示如何使用 `display: inline-block` 来创建水平排列的块状元素： ```html <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Inline-Block Example</title> <style> #container { padding: 10px; margin: 0px; height: 200px; width: 50%; border: 1px dotted; } #container > div { display: inline-block; /* 设置为 inline-block */ border: 1px dashed #ff0000; margin: 10px auto; width: 45%; /* 设置宽度 */ padding: 20px 0px; /* 设置内边距 */ } </style> </head> <body> <div id="container"> <div>Box 1</div> <div>Box 2</div> <div>Box 3</div> <div>Box 4</div> <div style="display:block">单独占据一行的块级元素</div> </div> </body> </html> ``` 在上述代码中，前四个子元素通过 `display: inline-block` 实现了在同一行的水平排列，而最后一个子元素由于设置了 `display: block`，因此独占一行[^2]。 #### 使用场景 - **导航菜单**：常用于创建水平排列的导航链接，每个链接作为一个独立的 `inline-block` 元素[^3]。 - **按钮组**：多个按钮需要在同一行显示时，可以通过 `inline-block` 实现。 - **图片画廊**：当需要在同一行显示多张图片，并且每张图片需要设置固定宽度和高度时，`inline-block` 是一个理想的选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值