How can I center an image of an unknown width?

Question

Using CSS how can I center an image of unknown dimensions?

Answer 1

Seeing as images are native inline-block elements (I think - at least not block),

text-align: center 

for the surrounding container will do the job.

Answer 2

You can use CSS like this:

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

Answer 3

Horizontally

img {display:block; margin: 0 auto}

or

.container {text-align:center}

Vertically

/* container must contain some text as well */
.container, img {line-height:100px; vertical-align:middle}

or

.container {display:table-cell; vertical-align:middle}

If image is only decorative:

.container {background: url(…) 50%;}