我想将此图片与中心对齐，但它不起作用

Question

在上面的代码中，我使用margin-left: auto和margin-right: auto属性将图像对齐到中心。我想将此图像与中心对齐，但它不起作用。

• 这段代码有什么问题？
• 有其他替代方法吗？

＆＃13;

＆＃13;

#boom{
  margin-top: 30%;
  height: 4%;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

<img src="image1.jpg" id="boom">

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用text-align:center

＆＃13;

＆＃13;

<div id="boom">
	<img src="http://www.w3schools.com/images/colorpicker.png" >
</div>
<style>
#boom{
	margin-top: 30%;
	width: 100%;
	text-align:center;
}
#boom img{ 
    width:50%;
}  
</style>

＆＃13;

＆＃13;

＆＃13;

Answer 2

所以，我使用flexbox ..它变得越来越受欢迎。

这就是我要做的事情：

＆＃13;

＆＃13;

.imageContainer
    {
        display: flex;
        justify-content: center;
    }

＆＃13;

<div class="imageContainer">
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Gingerbread_House_Essex_CT.jpg">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将display:table;添加到您的代码中

#boom{
        margin-top: 30%;
        height: 4%;
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        display:table;
    }