css - 在它的容器中居中图像

Question

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

我用检查元素尝试了很多方法，但它似乎不想工作。

请在此处查看示例：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;
}

标签： cssmargintext-align

Answer 1

要img在 a中居中div，给出imgadisplay: inline-block规则，然后给出divatext-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;
}