技术频道


margin: auto

margin:auto 和 margin:0 auto 区别:


  • 意思不同:margin:auto 等价于 margin:auto auto auto auto,表示上下左右都为 automargin:0 auto 等价于 margin:0 auto 0 auto,表示上下为 0,左右为 auto
  • 居中方式不同:margin:auto 表示横竖都居中,margin: 0 auto 表示横居中,竖不居中;

margin 后面一般会跟 4 个参数:如 margin:1px、1px、1px、1px,分别表示上外边距为 1px、右外边距为 1px、下外边距为 1px、左外边距为 1px。

如果后面只写 2 个参数的话,如 margin:1px、2px,则表示上下外边距为都为 1px,左右外边距都为 2px。

#main {
  width: 600px;
  margin: 0 auto; 
}

margin:auto 和 margin:0 auto


div id="main"

设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距。

唯一的问题是,当浏览器窗口比元素的宽度还要窄时,浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案...

div


发表评论