为什么我的图像不在我的DIV中居中？

Question

I've got to admit, I really don't much about HTML, but I'm attempting to learn. I have an image centered in a DIV, but it isn't truly centered horizontally. The left edge of it is where the center would be, like this:

[----------|----------]

[----------|image--]

[----------|----------]

What to do, what to do....

EDIT Some code:

<style>
#Outer {
position:relative;
height:100%;
width:100%;
text-align: center;
}

#Picture {
position:fixed;
top: 30%;

}
</style>

Also, I am centering it vertically AND horizontally. Vertical is working just fine.

Answer 1

You can simple do it like this. :)

<div style="margin:auto;">
      <img src="" id="" />
</div>

Answer 2

There can be several reasons for this, please post your html and css code to get a better answer.

Something that should work is setting the parent text-align property to center in the css. ( see demo )

Answer 3

I'm only learning html too but i have found that using something like

#picture
{
    margin-left:auto;
    margin-right:auto;
}

will get the div or whatever the style is for to be in the middle of the parent div

hope it helps

Answer 4

You can try changing position to relative. (see http://jsfiddle.net/VLCqz/1/ )

As for the reason why...

Answer 5

Set a width on the image and then set the margin on the image to be 0px auto.

<!-- Your HTML -->
<img src="path_to_image.jpg" alt="set alternate text" id="img_id" />

/* Your CSS: */
#img_id {
width: set the width of the image in pixels here (i.e. 250px);
margin: 0px auto;
}