如何在 div 中居中 img [重复]答案

【问题标题】：How to center img inside the div [duplicate]如何在 div 中居中 img [重复]
【发布时间】：2012-11-05 21:13:09
【问题描述】：

可能重复：
How to center image inside 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>

这不正常。

【问题讨论】：

您是否尝试将img的边距设置为自动？
google 中的简单单词给了我结果，上面是第一个条目。Google 我的朋友。
@SvenBieder 试过了，没用

标签： javascript html css web image

【解决方案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>

应该为你工作

【讨论】：

text-align:center 是我需要的东西
是的..我需要等待 10 分钟才能接受 :) 抱歉

【解决方案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>

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

display:block;margin:0 auto;

【讨论】：

IE7,8,9, Firefox 和 Chrome 都可以，还需要什么..