CODEWITHSUNDEEP
csshtmlalignment
Brad Adams
Brad Adams

Reputation: 2069

Horizontal image align CSS

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).

Upvotes: 5

Views: 23392

Answers (4)

Nitesh
Nitesh

Reputation: 15739

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;
}

Upvotes: 7

Swarnamayee Mallia
Swarnamayee Mallia

Reputation: 2008

check the Fiddle here with css and code

#header {
    text-align:center;
}
img.displayed{
    display: block;
    margin:0 auto;
}

<div id="header">
<img src="http://www.0034.eu/propmanager/images/background-space.png" class="displayed" border="0" width="100" height="100"/>
</div>

Upvotes: 0

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

Inline blocks (like just inlines, which are the images by default) participate in the inline formatting context, not the block formatting context. That's why they don't obey margin:auto (which effectively means margin: 0 for them), but do obey the text-align of their ancestor block element.

Upvotes: 2

Sowmya
Sowmya

Reputation: 26969

Add display: block;

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

DEMO

Upvotes: 5

Related Questions