Centering an image for responsive website

Question

So i am making a responsive design for a school assignment and i am trying to center an image width.

i scaled the image in photoshop so i don't have to set any width or height to the image

this is what i got now but this does not work

<header> <img src="afb%20/logo3.png" alt="logo3" width="" height="" /> </header>

header{ width: 100%; margin-left: auto; margin-right: auto; }

Can someone help me out ? really need this !

thanks in advance

Answer 1

Just set text-align: center in the header CSS.

You are currently making the header 100% width, so your margins wont apply. Furthurmore since your container is 100% wide and there is no text-alignment, the img will ALWAYS be aligned on the left.

Here:

header { width: 100%; text-align: center; }​

http://jsfiddle.net/xMPZ4/

Answer 2

.center{margin: 0px auto; display: block;}

<header><img src="updates_button.jpg" alt="logo3" class="center"></header>

Answer 3

You could add a logo class to the image and set the CSS to : margin:0px auto; width:200px; margin:0px auto; width:200px; of course replace the image width...