Thursday, October 3, 2013

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

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


Add this to your CSS style.

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


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

No comments:

Post a Comment