Auto margins don't center image in page

css google-chrome margin centering
Web_Designer picture Web_Designer · Apr 20, 2011 · Viewed 177.7k times · Source

In this example the image is not centered. Why? My browser is Google Chrome v10 on windows 7, not IE.

<img src="/img/logo.png" style="margin:0px auto;"/>

Answer

Ross picture Ross · Apr 20, 2011

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.

Related questions

How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More
Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Remove blue border from css custom-styled button in Chrome

I'm working on a web page, and I want custom-styled <button> tags. So with CSS, I said: border: none. Now it works perfectly in safari, but in chrome, when I click one of the buttons, it puts an …

Read More