如何在其容器 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 中居中。容器已 overflow hidden ,所以我想看到图像的中心,因为它通常是焦点所在的位置。
最佳答案
#artiststhumbnail a img {
display:block;
margin:auto;
}
这是我的解决方案:http://jsfiddle.net/marvo/3k3CC/2/
关于html - 如何在 div 元素中水平居中图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10989238/