我怎么能居中对齐(水平)一个图像内的容器div?

这里是HTML和CSS。我还为缩略图的其他元素添加了CSS。它以降序运行,所以最高的元素是所有元素的容器,最低的元素是所有元素的内部。

#thumbnailwrapper { color: #2A2A2A; margin-right: 5px; border-radius: 0.2em; margin-bottom: 5px; background-color: #E9F7FE; padding: 5px; border: thin solid #DADADA; font-size: 15px } #artiststhumbnail { width: 120px; height: 108px; overflow: hidden; border: thin solid #DADADA; background-color: white; } #artiststhumbnail:hover { left: 50px } <!--link here--> <a href="NotByDesign"> <div id="thumbnailwrapper"> <a href="NotByDesign"> <!--name here--> <b>Not By Design</b> <br> <div id="artiststhumbnail"> <a href="NotByDesign"> <!--image here--> <img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" /> </a> </div> <div id="genre">Punk</div> </div>

好的,我已经添加了没有PHP的标记,所以应该更容易看到。这两种解决方案在实践中似乎都行不通。顶部和底部的文本不能居中,图像应该在其容器div中居中。容器有溢出隐藏,所以我想看到图像的中心,因为这通常是焦点所在。


当前回答

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

这是我的解决方案:http://jsfiddle.net/marvo/3k3CC/2/

其他回答

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

这是我的解决方案:http://jsfiddle.net/marvo/3k3CC/2/

为左右两边设置相同的像素填充:

<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">

将图像居中的响应方式可以是这样的:

.center {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

将图片放入newDiv中。 使包含div的宽度与图像相同。 适用余量:0自动;到newDiv。 这将使div位于容器的中心。

这就是我最后做的:

<div style="height: 600px">
   <img src="assets/zzzzz.png" alt="Error" style="max-width: 100%; 
        max-height: 100%; display:block; margin:auto;" />
</div>

这将限制图像高度为600px,并将水平居中(如果父宽度较小,则向下调整大小)到父容器,保持比例。