javascript - 如何在 div 中居中 img

Question

可能重复：
如何在 div 中居中图像

我需要能够将图像放在 div 的中心。无论分辨率如何，我的图像都需要位于中心。

代码：

<div style="width:100%; height:20%;">
    <img src="images/pic.png" id="image"  style="width: 208px; height: 75px;margin-left: 42%;" alt=""/>
</div>

这不能正常工作。

Answer 1

<div style="width:100%; height:20%; text-align:center">
    <img src="images/pic.png" id="image"  style="width: 208px; height: 75px; margin:0 auto;" alt=""/>
</div>

应该为你工作

Answer 2

试试这个：

<div style="width:100%; height:20%;text-align:center;"> 
<img src="images/pic.png" id="image style="width:208px; height:75px; margin-left:42%;" alt=""/>
</div>

Answer 3

#Sample
{
background:url(your_image.jpg) no-repeat center center;
height:200px;
width:200px;
}

（假设 id="sample" 的 div 因为您已经指定了高度和宽度，所以添加背景应该不是问题）

Answer 4

这是因为您为图像设置了 42% 的左侧边距。在图像样式上试试这个：

display:block;margin:0 auto;