html - 在div中将图像水平居中(Center image horizontally within a div)

Question

This is probably a stupid question but since the usual ways of center aligning an image are not working I thought I would ask. (这可能是一个愚蠢的问题，但是由于居中对齐图像的常规方法不起作用，所以我想问一下。) How can I center align (horizontally) an image inside its container div? (如何在容器div内居中对齐（水平）图像？)

Here's the HTML and CSS. (这是HTML和CSS。) I've also included the CSS for the other elements of the thumbnail. (我还包括了缩略图其他元素的CSS。) It runs in descending order so the highest element is the container of everything and the lowest is inside everything. (它以降序运行，因此最高的元素是所有内容的容器，最低的元素是所有内容的容器。)

 #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> 

Okay, I have added the markup without the PHP in so should be easier to see. (好的，我添加了没有PHP的标记，因此应该更容易看清。) Neither solution seems to work in practice. (这两种解决方案似乎都无法在实践中起作用。) The text at top and bottom cannot be centered and the image should be centered within its container div. (顶部和底部的文本不能居中，并且图像应在其容器div中居中。) The container has overflow hidden so I want to see the center of the image as that's normally where the focus is. (容器隐藏了溢出，因此我想查看图像的中心，因为通常这是焦点所在。)

  ask by Jacob Windsor translate from so

Answer 1

The CSS Guy suggests the following: (CSS Guy建议如下：)

So, translating, perhaps: (因此，翻译：)

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

Here's my solution in: http://jsfiddle.net/marvo/3k3CC/2/ (这是我的解决方案，位于： http : //jsfiddle.net/marvo/3k3CC/2/)