css - 当我的 div 没有水平居中时？

Question

为什么图片没有居中？

#image {
  margin: 0 auto;
}

<div id="image">
  <img src="https://placekitten.com/200/300">
</div>

但它与 <center> 完美配合标签。

我的 fiddle

Answer 1

JSFiddle here .你的<div>在 width 中需要为 100% ，图像必须是 block 元素；试试这个 CSS:

#image {
    width: 100%;
}
#image img {
    margin: 0 auto;
    display: block;
}

或者:

#image {
    width: 100%;
    text-align: center;
}

这将居中<img>标签，因为它们有 display: inline-block;默认情况下。只有display: block元素可以使用 margin: 0 auto; 居中.

快速总结:

• 水平居中block使用 margin: 0 auto; 显示元素在元素上，相对于父元素的宽度居中；
• 水平居中inline-block使用 text-align: center; 显示元素在父元素上，相对于父元素的宽度居中。