为什么图片没有居中?
#image {
margin: 0 auto;
}
<div id="image">
<img src="https://placekitten.com/200/300">
</div>
但它与 <center>
完美配合标签。
我的 fiddle
最佳答案
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;
显示元素在父元素上,相对于父元素的宽度居中。
关于css - 当我的 div 没有水平居中时?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38746533/