Auto margins don't center image in page
add display:block;
and it'll work. Images are inline by default
To clarify, the default width for a block
element is auto
, which of course fills the entire available width of the containing element.
By setting the margin to auto
, the browser assigns half the remaining space to margin-left
and the other half to margin-right
.
Under some circumstances (such as earlier versions of IE, Gecko, Webkit) and inheritance, elements with position:relative;
will prevent margin:0 auto;
from working, even if top
, right
, bottom
, and left
aren't set.
Setting the element to position:static;
(the default) may fix it under these circumstances. Generally, block level elements with a specified width will respect margin:0 auto;
using either relative
or static
positioning.
You can center auto width div using display:table;
div{
margin: 0px auto;
float: none;
display: table;
}