Hi - sorry for asking this as im sure its been asked before - cant find it thogh.
Centering an inage in a div - the old way was <div align=center>
what is the best way to do it with css? I think i tried creating a class with text align=center and it doesnt seem to work.
What is best practice for this?

Many Thanks

Try this link:-

http://www.solstice.co.il/2008-02-26...c_width_in_css

make the div class have
text-align:center;

and the image have
margin: auto;

<div style="text-align: center">img code here</div>

will do it for you

Nope, here's an easy and (better) method.

Create a css class for your image, like this:

.imgCenter{
display:block;
margin: 0 auto; (adjust top and bottom margins as needed)
}

That's it. Then in your html, for that image just use;
<img class="imgCenter" src="blahblahblah" />

Image centered in any div !

well the truth is no one is wrong as they all work, however some have pros and cons there are easy ways and there are more difficult ways such as you can do this:

.content img {
margin: 0px auto;
display: block
}

<div class="content">content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here

content here content here content here content here content here <img src="blahblahblah" />content here</div>

this way means you won't have to add class attributes to every image but also means every image in the content class will be centered and doesn't put the new image on a new line.

That's normally what I do also (what LadynRed pointed out), but if you ever have an image inside of an anchor (<a href="wherever.html"><img src="whatever.jpg" /></a>), having the image set to "block" will unfortunately make the hover space of the link (that makes the cursor into a hand) take up all of the available horizonal space, which is confusing. Therefore, knowing that images are inline elements, and can also be centered with text-align: center, is good knowledge to have.

That would definitely work too, provided you want ALL the images inside .content to be centered. So, take your pick

Of course, you could put a single div wrapper around the one image, which is slightly redundant, but it works. Most cases I would just block it and auto margin it, like you pointed out.

thanks for that guys