这可能是一个愚蠢的问题,但由于中心对齐图像的常用方法不起作用,我想我会问.如何在容器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
}Run Code Online (Sandbox Code Playgroud)
<!--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>Run Code Online (Sandbox Code Playgroud)
好的,我已经添加了没有PHP的标记,所以应该更容易看到.这两种解决方案似乎都没有实际应用.顶部和底部的文本无法居中,图像应在其容器div中居中.容器已隐藏溢出,因此我希望看到图像的中心,因为它通常是焦点所在的位置.
我想在没有javascript和没有背景图像的div中居中一个img .
这是一些示例代码
<div>
<img src="/happy_cat.png"/>
</div>
Run Code Online (Sandbox Code Playgroud)
期望的结果.(忽略不透明等,只需注意定位).

我知道这可以通过背景图像轻松完成,但这对我来说不是一个选择.我也可以使用javascript,但它似乎是一个非常沉重的方式来实现这一点.
谢谢!
插口