在它的容器中居中图像[重复]

Question

我似乎无法将我的图像居中，它的定位是相对于它的相对父级。

我用inspect element尝试了很多方法，但它似乎不想工作。

请在此处查看示例：http://dassiedev.dassieartisan.com/furniture

这是我的 CSS：

    .tm-switch-image-container {
    position: relative;
    overflow: hidden;
    height: 276px;
}
.tm-switch-image-container img {
    width: 276px;
    height: 276px;
    max-width: none;
}

Answer 1

要在div 中居中img，请给img 一个display: inline-block 规则，然后给div 一个text-align: center 规则。这将使其水平居中。

.tm-switch-image-container {
    position: relative;
    overflow: hidden;
    height: 276px;
    text-align: center;
}

.tm-switch-image-container img {
    width: 276px;
    height: 276px;
    display: inline-block;
}