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;