在它的容器中居中图像

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

要使 img 在 div 中居中，请给 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;
}

在它的容器中居中图像

Center image within it's container

css

text-align

margin