Question

为什么图像不在这里居中？

＆＃13;

#image {
  margin: 0 auto;
}

＆＃13;

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

＆＃13;

但它适用于<center>标记。

我的fiddle

Answer 1

JSFiddle here。您的<div>需要在width中为100％，并且图片必须是块元素;试试这个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;个元素，相对于父元素的宽度居中。

Answer 2

由于图片不是块元素，只需将text-align: center;添加到其父元素即可。

#image{
  text-align: center;
}

Answer 3

您可以使用text-align:center;

#image{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  
     }

<div id="image">
     <img src="https://scontent-kul.xx.fbcdn.net/v/t1.0-0/s526x395/13934860_132991530474366_7559506120027031422_n.jpg?oh=54eb36c2f2b2383712a6dcf1da2cd638&oe=58212A26">
     </div>

Answer 4

或者您可以使用flexbox

#image {
  height: 90vh;
  width: 90vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

您不需要90vh或90vw，但您需要为height和width提供一些价值。是px还是%取决于您。

当我的div没有水平居中？

4 个答案: