我有一个div 200x200px。我想在div的中间放置一个50 x 50 px的图像。

怎样才能做到呢?

我能够得到它的中心水平使用文本对齐:中心的div。但垂直对齐是问题..


当前回答

当然,另一种方法是使用valign创建一个表。不管你是否知道div的高度,这都可以工作。

<div>
   <table width="100%" height="100%" align="center" valign="center">
   <tr><td>
      <img src="foo.jpg" alt="foo" />
   </td></tr>
   </table>
</div>

但只要可能,您应该始终坚持只使用CSS。

其他回答

一个简单而优雅的解决方案,每次都适用于我:

<div>
    <p style="text-align:center"><img>Image here</img></p>
</div>

如果你知道父div和图像的大小,你可以使用绝对定位。

你可以设置图像的位置是对齐中心水平

#imageId {
   display: block;
   margin-left: auto;
   margin-right:auto;
}
.container {
height: 200px;
width: 200px;
float:left;
position:relative;
}
.children-with-img {
position: absolute;
width:50px;
height:50px;
left:50%;
top:50%;
transform:translate(-50%);
}

谢谢大家提供的线索。

我用了这个方法

div.image-thumbnail
{
    width: 85px;
    height: 85px;
    line-height: 85px;
    display: inline-block;
    text-align: center;
}
div.image-thumbnail img
{
    vertical-align: middle;
}