Horizontal image align CSS

Question

I'm having some trouble aligning a main image. It should be center-aligned horizontally, yet keeps going all over the place. The page can be found here http://0034.eu/propmanager/

<img src="images/background-space.png" class="displayed" border="0" />

IMG.displayed{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

That's basically the CSS I have applied to the image, all the source code is on main index.html (no separate style sheet).

Answer 1

Add this to your CSS style.

img.displayed {
    display: table-caption;
    margin: 0 auto;
}

EDIT

From the inputs of IlyaStreltsyn, I agree with the point of clearing the right with display:block for the image to be centered.

For Instance,

img.displayed {
    display: block;
    margin: 0 auto;
    clear: right;
}

Answer 2

Add display: block;

img.displayed{
    display: block;
    margin:0 auto;
}

DEMO