为啥 CSS 中的“margin: 0 auto”+“display:block”命令使元素居中? [复制]
Posted
技术标签:
【中文标题】为啥 CSS 中的“margin: 0 auto”+“display:block”命令使元素居中? [复制]【英文标题】:Why "margin: 0 auto" + "display:block" commands in CSS is centering elements? [duplicate]为什么 CSS 中的“margin: 0 auto”+“display:block”命令使元素居中? [复制] 【发布时间】:2020-01-29 03:08:26 【问题描述】:我理解“margin: 0 auto”+“display:block”可以使 div 或 img 等元素居中,但我无法理解其背后的逻辑。 我们只说: 1.元素与“外部”边界之间的空间为零。 2.你“抓住”了所有的线。
我真的不明白为什么它会居中元素。
谢谢!!!
【问题讨论】:
这里指定的是自动左/右边距和零上/下边距。自动auto
部分是导致居中的原因。
【参考方案1】:
您可以将 margin 属性设置为 auto 以使元素在其容器内水平居中。
然后元素将占据指定的宽度,剩余空间将在左右边距之间平均分配。
【讨论】:
但是为什么没有 "display:block" 就不行呢? @El-habib Amazzal【参考方案2】:margin: 0 auto
表示 0 垂直边距和自动水平边距。 “自动水平边距”基本上是指生成自动居中边距(相对于父级)。
display: block
确保将其作为块元素而不是内联元素处理。
您可以将auto
视为“中心”的意思; (虽然可能有一些例外情况,你不希望总是这样想,不确定。)
【讨论】:
但是为什么没有 "display:block" 就不行呢? @Dave Cousineau @lir 内联元素的行为不同。如果元素已经是块元素,例如div
,那么您不需要display: block
。如果它类似于span
,那么某些类型的格式将不起作用,或者会以不同的方式起作用。内联元素 kind of 的作用类似于句子(就格式而言),而块元素 kind of 的作用类似于段落。【参考方案3】:
因为浏览器会为您计算 margin-left 和 margin-right 并均匀地间隔。
enter link description here
【讨论】:
以上是关于为啥 CSS 中的“margin: 0 auto”+“display:block”命令使元素居中? [复制]的主要内容,如果未能解决你的问题,请参考以下文章
求教css中元素的auto属性值是啥意思,比如margin:0 auto表示啥?
我在css中指定了 body width: 800px; background-color: pink; margin: 0 auto; 不起作用