html - 无法水平居中图像

Question

我试图在此示例中将图像水平居中 http://jsfiddle.net/3k3CC/1545/ ，但我没有成功。它仅在容器比图像宽时有效，但我需要的是即使容器比图像本身更薄，图像也能居中。

示例 CSS:

#artiststhumbnail {
    width:100px;
    height:308px;
    overflow:hidden;
    border-color:#DADADA;     
    border-style:solid;
    border-width:thin;
    background-color:pink;
}
#artiststhumbnail:hover {left:50px }
#genre {
    font-size:12px;
    font-weight:bold;
    color:#2A2A2A
}


#artiststhumbnail a img {
    display : block;
    margin : auto;
}

示例 HTML:

<div id="artiststhumbnail">
    <a href="#">
        <!--image here-->
        <img src="http://goo.gl/QrKCc" height="100%" alt="artist" border="1" />
    </a>
</div>

Answer 1

您应该将 text-align: center; 添加到 #thumbnailwrapper 并将 display: inline-block; 设置为 #artiststhumbnail 。

DEMO

编辑:

抱歉，我一开始没理解您的问题。使用这个简单的 CSS:

#artiststhumbnail a img {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

DEMO2