如何在div中水平居中图像？

Here's the code. I can't figure out how to make the image be horizontally centered inside the div. Thanks in advance!

这是代码。我无法弄清楚如何使图像在div内水平居中。提前致谢!

.first {
    height: 100%;
}
.first img{
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto;
}

1 个解决方案

#1

.first {
    height: 100%;
    text-align: center;
}
.first img{
    width: 100px;
    height: 100px;
    position: relative;
    display: inline-block; // this line is only required if your img is not already using display: inline-block
}