为什么我不能在div内居中放置此图像？

Question

I'm trying to center my image inside the div, but its seemingly glued to the right.

Here are my divs:

<div align="left" style="display:inline-block;">
    <div style="width:210px;">
        <img src="res/img/TopAd.png" style="top:-100px; padding:10 0 10 0;">
    </div>
</div>

This is what it looks like:

How can I fix this?

Answer 1

img tags are inline by default so all you have to do is call text-align: center on its parent:

<div style="display:inline-block;">
  <div style="width:210px;text-align: center;">
    <img src="res/img/TopAd.png" style="padding:10px 0;">
  </div>
</div>

A few other notes:

1. You can remove align="left" , that's not supported in HTML5.
2. You can also remove top: -100px because the top , left , right , and bottom properties don't work unless an element is set to fixed , absolute or relative .
3. This line: padding: 10 0 10 0; is missing px added to it and can be condensed to padding: 10px 0; which is top and bottom.

UPDATE

if you want to just center all of this in the middle of the page you can add text-align: center to the body but I would suggest removing the first div and adding margin:auto to the second one which has a defined width:

<div style="width:210px;text-align: center; margin: auto;">
   <img src="http://www.placecage.com/200/400" style="padding:10px 0;"/>
</div>

FIDDLE

Answer 2

<div align="left"

The align attribute was deprecated in HTML4. Use style="text-align: left;" instead of align="left" .

padding:10 0 10 0;

10 of what? You are missing the units. You probably want 10px for pixels:

padding:10px 0 10px 0;

I don't see any code in there that even looks like it's trying to center the image. Try text-align: center on the container that the image should be centered within.

 <div style="display:inline-block;"> <div style="width:210px; text-align: center; border: 1px solid #ccc;"> <img src="http://placecage.com/160/160" style="padding: 10px 0 10px 0;" /> </div> </div> 

Answer 3

<div align="left" style="display:inline-block;">
    <div style="width:210px; vertical-align:middle; text-align:center">
        <img src="res/img/TopAd.png" style="top:-100px; padding:10 0 10 0;">
    </div>
</div>

Answer 4

The following code will do the task.

<div align="left" style="display:inline-block;">
    <div style="width:210px;" align="center">
    <img src="res/img/TopAd.png" style="top:-100px; padding:10 0 10 0;">
</div>