Search code examples
imagehtmlcsscentering

Centering an image for responsive website

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

Solution

  • 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/