“自动边距:0;”需要什么才能正常工作?

我知道设置margin:0自动用于将其居中(左-右)。但是,我知道元素及其父元素必须满足某些标准,才能使自动边距正常工作,而且我似乎永远也无法正确使用这个神奇的元素

所以我的问题很简单:为了margin:0auto,元素及其父元素必须设置哪些CSS属性儿童左右居中

不经意间:

  1. 元素必须是块级别,例如display:blockdisplay:table
  2. 元素不能浮动
  3. 元件不得具有固定或绝对位置1

在别人的脑海里:

  1. 该元素必须具有非自动的宽度2

请注意,这些条件中的所有都必须适用于居中的图元,才能正常工作


1有一个例外:如果您的固定或绝对定位元素的左侧为0;右:0,它将居中并自动设置页边距。

2从技术上讲,页边距:0 auto与自动宽度一起工作,但自动宽度优先于自动页边距,因此自动页边距被调零,使其看起来好像“不工作”。

发表评论