Centering Images

[Primal]

I want to center an image that I am using as a title at the top of my homepage. How would I do this instead of using <center>?

[Xtazy]

<div align="center"> and </div>

[Err]

or the HTML strict valid way:

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

[Xtazy]

Too long...:)Primal, but you can center that image with <center> too...i did it...

[ste]

Too long...

not really Xtazy considering that you would probably only need define it once in css and then just call that class whenever nessecary. probably less code in the long run

[Xtazy]

Yeah , but to me is simple to <center> and </center> all i want to center instead of using that code once...Dunno why, but it looks more....more...i dunno, more something......and it's easier to remember...for me......

[Primal]

How would you do it in CSS then, ste?

[ste]

rather than putting this in your html:<div style="text-align:center; margin-left:auto; margin-right:auto;"> </div>have a css class:.center {text-align:center; margin-left:auto; margin-right:auto;}then you have: <div class="center"></div>whenever you need it

[Primal]

Yes, I know, but I want to center an image. Would this do that even though it's called "text-align"?

[jlhaslip]

img { margin-left:auto; margin-right:auto; text-align:center; padding:0;}The text-align is for some older non-standard compliant Browser to recognize the attempt to centre the picture. These older Browsers don't recognize the margin:auto. It works on Images, too.

[3jbert]

Yes, I know, but I want to center an image. Would this do that even though it's called "text-align"?

I put the text-align:center; in my CSS and it centered the header image just finejim

[jlhaslip]

must be using IE as your Browser?Standard Compliant Browser would prefer the margin:auto.Glad you got it working.

[Primal]

I seriously can't get it to work! Here, this is what I have in the HTML file,

<img class="title" src="Title.jpg" alt="Primal Corporation">

and this is what I have in the CSS file:

img {margin-left:auto; margin-right:auto; text-align:center; padding:0}

It will not work!

[pulpfiction]

Yeah , but to me is simple to <center> and </center> all i want to center instead of using that code once...Dunno why, but it looks more....more...i dunno, more something......and it's easier to remember...for me......

But the <center> tag is deprecated http://www.w3schools.com/tags/tag_center.asp

I seriously can't get it to work! Here, this is what I have in the HTML file,

<img class="title" src="Title.jpg" alt="Primal Corporation">

and this is what I have in the CSS file:

img {margin-left:auto; margin-right:auto; text-align:center; padding:0}

It will not work!

Try this img { display: block; margin-left: auto; margin-right: auto; }

[Primal]

Nope. It put the two image links at the bottom of the page on top of each other instead of next to each other but it didn't do anything to the one at the top. I don't know what wrong.

[jlhaslip]

http://www.w3.org/TR/CSS21/selector.html#class-htmlThat link shows how to use class selectors.And this is a good example of why we ask for your code to look at. Until now, there has been no mention of the image being 'classed', so no-one has considered it important, but had the code been posted, we would've determined the class selector for the images.try this:

img.title {margin: 0 auto; text-align:center;}

[Anders Moen]

As people has said earlier, do it this way:HTML:<div id="center_image"><img src="yourimage.gif" alt=""></div>CSS:#center_image {width: 100%;// There are two options I would have used in this case. You choose yourself:// width: 100%; and text-align: center;// OR// margin: 0 auto; and text-align: center; (and not width: 100%;, but width: 300px; (just an example width instead of 100%))text-align: center;// And now you just add on the rest }

[primefalcon]

if you have problems you can always just put the image in a table like this, i know this may be a little long but tables can also be handy to align other content with the picture<table width="whatever your picture width is" height="whatever your picture height is" align="center"><tr><td width="picture width" height="picture width">Image url</td></tr></table

[Primal]

Thank you very much, pulpfiction!!! Your answer is the only one that would work! Does anyone have any idea why that would be?P.S. Primefalcon, your probably would have to but I am trying to get it HTML 4.01 Strict, and I think the align attribute is deprecated.

[jlhaslip]

Primal, link us to your page or post the code in its entirety so we don't have to guess. And using tables for page structure is not the right way according to the w3c. Tables are for presentation of 'tabular' data. Images are not 'tabular' data.

[Anders Moen]

if you have problems you can always just put the image in a table like this, i know this may be a little long but tables can also be handy to align other content with the picture<table width="whatever your picture width is" height="whatever your picture height is" align="center"><tr><td width="picture width" height="picture width">Image url</td></tr></table

No, because you're not gonna use tables, unless its tabular data, in other words td. (I think tabular is right, isn't it?)