Center Picture using CSS

[sclewin]

Hi,

I started scripting in HTML in the 90's where it was as easy as <center></center> to centre an image, so how do I do this using css and html 4.01 strict in a simple way. I tried looking up on google and could only find complicated answers. I also tried text-align in CSS, but that only works with text.

Why is there not an align in CSS?

 

[TechAsh]

You just need to add:

IMG.center {
display: block;
margin-left: auto;
margin-right: auto }

And the add class="center" to the <IMG> tag.

Does that make sense?

 

[cybahq]

You just need to add:

And the add class="center" to the <IMG> tag.

Does that make sense?

or <p align="center">

for eg* to center a jpg

<p align="center"><img src"yourpic.jpg"</img>

 

[shuboo]

Or you could even use

 <div style="text-align:center"> <img src="__________"> </div>

This is great because you can put text after the picture, or on a line after, etc. and it will center it until you close the div.

 

[marshian]

Well it all depends on your browser!
If you use an image

<img style="margin-right: auto; margin-left: auto;" />

in firefox, it's centered in the parent element. If you use exactly the same code in internet explorer 7, nothing happens...
If you use

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

In firefox, nothing happens. The same code in IE7, and it's centered in the parent div... (which makes no sense, since an image is not text...)
Anyway, you'll have the most chance to get it centered if you use this:

<div style="text-align: center;">
<img style="margin-left: auto; margin-right: auto;" />
</div>

Good luck finding out what browser actually follows the standards!

- Marshian