html - 无法在 CSS 中将图像居中

Question

我正在尝试将图像水平居中放置在 div 中。但是，我一直做不到。我试过将垂直对齐设置为中间，将边距设置为自动、0 自动以及我能想到的所有变化。什么都不管用。这是当前设置方式的代码:

img {
border: 0;
margin: 0 auto;
}

.intro img {
border-radius: 50%;
vertical-align: middle;
padding: 10px;
}

图像位于介绍 div 中。您可以提供的任何建议都会有所帮助。

Answer 1

如果你想水平和垂直居中你的图像，这应该可以解决问题:

 .intro {
    display: table;
    width: 500px; /* works with any width */
    height: 150px; /* works with any height */
    background: #ccc;
}

.imgcontainer {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

img {
    background: #fff;
    padding: 10px;
    border-radius: 50%;
}

<div class="intro">
   <div class="imgcontainer">
     <img src="http://s.gravatar.com/avatar/bf4cc94221382810233575862875e687?r=x&s=50" />
   </div>
</div>