DEMO

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

Answer 2

您可以将此代码添加到#artiststhumbnail，

width: 100%;
padding: 15px;

http://codepen.io/jrey/pen/waXgBO更新了代码：）

尝试这个CSS ..评论你的CSS并试试吧......

#artiststhumbnail {
    width:100px;
    height:308px;
    overflow:hidden;
    border-color:#DADADA;     
    border-style:solid;
    border-width:thin;
    background-color:pink;
  width: 100%;
  padding: 15px;
  display: inline-flex;
    flex-flow: row wrap;
    justify-content: center;
}


#artiststhumbnail:hover {left:50px }
#genre {
    font-size:12px;
    font-weight:bold;
    color:#2A2A2A
}

#artiststhumbnail a  {
    display: flex;
    justify-content: center;
}

#artiststhumbnail a img {
    display : block;
    margin : 15px;
  width: 200px;
  height: auto;
}

Answer 3

DEMO

CSS

    #thumbnailwrapper {
        color:#2A2A2A;
        margin-right:5px;
        border-radius:0.2em;
        margin-bottom:5px;
        background-color:#E9F7FE;
        padding:5px;
        border-color:#DADADA;
        border-style:solid;
        border-width:thin;
        font-size:15px;
        /* The following rules make this a flexbox container */
        display: flex;
        display: -webkit-flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
    }
    #thumbnailwrapper:hover {
        box-shadow:0 0 5px 5px #DDDDDD
    }
    #artiststhumbnail {
        width:100px;
        height:308px;
        overflow:visible;  // Changed from hidden to visible 
        border-color:#DADADA;
        border-style:solid;
        border-width:thin;
        background-color:pink;
    }
    #artiststhumbnail:hover {
        /*left:50px*/
    }
    /* No position: fixed. absolute, or relative; left: 50px has no effect on a static element */
     #genre {
        font-size:12px;
        font-weight:bold;
        color:#2A2A2A
    }
    #artiststhumbnail a img {
        /* display: block;
         margin: auto; */
    }
    /* Removed margin and block display to demonstrate that flexbox container and it's children elements are not easily influenced by other element properties and attributes */

HTML

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

    </div>
</div>

Answer 4

您可以尝试将图片宽度设为100％

#artiststhumbnail a img {
    display : block;
    margin : auto;
     width:100%;

}

Answer 5

不确定你的中心究竟是什么意思，但它确实如此。如果您希望图片本身居中，请使用background-size: cover和background-position: center来完成此操作。

<div id="thumbnailwrapper">
<div id="artiststhumbnail">
    <a href="#">
        <!--image here-->
        <div></div>
    </a>
</div>
</div>


#artiststhumbnail a div {
    display : block;
    margin : auto;
    height: 100%;
    width: 100px;
    background-image: url('http://goo.gl/QrKCc');
    background-repeat: no-repeat;
    background-position: center; 
    background-size: cover;
}

JSFiddle

编辑：抱歉，附上了错误的jsfiddle链接

无法水平居中img

5 个答案:

DEMO

CSS

HTML