Centering image without <center>

[inki]

How to center an image?1. without using <center>2. using valid w3c compliant xhtml / css3. which works in both IE and firefoxPlease share your knowledge. Thanx.

[htmlkid]

the only thing i can think of not sure if this is what you want

<align="center">

[inki]

hi htmlkid. the align atribute is depreciated. it is not xhtml strict. so how to center an image using xhtml strict. this is my question.

[Nudua]

Why not CSS:

<img src="someimage.jpg" style="margin: 0 auto;"

<img src="someimage.jpg" style="text-align: center;"

I don`t remember who that will work, but I think it`s the first one.

[inki]

the above methods does not work.

[raimo]

the above methods does not work.

<{POST_SNAPBACK}>

This one will work! :)Head -part: (or rather external CSS -file, without style-tags)

<style type="text/css"><!--.imgs{margin: 0 auto;width: 500px;text-align: center;}--></style>

Body -part:<div class="imgs"><img src="pic1.png" alt="pic1" /></div>if You (or someone) is using MSIE older than 6.x set body text-align to center.Remember as a proper DTD with URL, DTD has effects with MSIE 6.x and margin auto.

[inki]

raimo, its working. the image is now at the center. now what if i want to center the image using inline css. could you please give the code for centering an image using inline css also?thanx.

[raimo]

raimo, its working. the image is now at the center. now what if i want to center the image using inline css. could you please give the code for centering an image using inline css also?thanx.

<{POST_SNAPBACK}>

Do not use inline CSS with XHTML, it's going to be as a W3C deprecated way to do things.External CSS file is very cool, You can easily add styles of huge set of pages within one style-file.OK, this time I can do it with inline CSS, but for example purposes only.

<div style="margin: 0 auto; width: 500px; text-align: center"><img src="pic1.png" alt="pic1" /></div>

[inki]

what is the significance of

width: 500px;

what does it do actually? any idea?

[Little Goat]

It makes the div 500 pixels wide. thats all.LG

[boen_robot]

Do not use inline CSS with XHTML, it's going to be as a W3C deprecated way to do things.

And where did you learn that lie from? W3C would never deprecate something (the <center> tag in our case) without providing, or at least think of future providings of an alternative. Using inlinde CSS is sometimes crutual to solving global stylesheets problem. I don't think it's going to be deprecated that easily, but if you can give me an official W3C statement, I would believe it. I know that using external stylesheets is cool, but there are reason for inline styles' existense as well.

[johneva]

And where did you learn that lie from? W3C would never deprecate something (the <center> tag in our case) without providing, or at least think of future providings of an alternative. Using inlinde CSS is sometimes crutual to solving global stylesheets problem. I don't think it's going to be deprecated that easily, but if you can give me an official W3C statement, I would believe it. I know that using external stylesheets is cool, but there are reason for inline styles' existense as well.

<{POST_SNAPBACK}>

Using <center> or <div align="center"> are both already depriciated.W3C some depriciated tagsThough you can still use <div style="text-align: center;">But generally external style sheets are the way to go.Unless the style is a one of in the whole of the site even then I prefer to just give an id to the element, that way all the styles are in there right place the CSS file.Thanx John

[boen_robot]

I know about the <center> tag and the align="center" attribute. I was refering to the style attribute. I know that external stylsheets are the way to go, but the style attribute (a.k.a. "inline CSS" as it's in the quote) is definetly NOT going to be deprecated.

[johneva]

Hate to be fickle if that is the term but you did say.

W3C would never deprecate something (the <center> tag in our case)

And no I carnt see them doing away with the style attribute.

[raimo]

And where did you learn that lie from?

<{POST_SNAPBACK}>

Lie? I learn it from W3C http://www.w3.org/TR/xhtml11/doctype.htmlStyle Attribute Module DeprecatedThere is more incoming! They (W3C) are hunting img tag now, it will be changed to "embedded object(attribute)". But first ALL styles and scripts will be removed from XHTML-document. That's the way things go in future.edit:sorry, img won't be as object tag: hard to say what this is, it's as an image embedded to p -tag <p src="pic1.png" srctype="image/png">my 1st XHTML2 photo</p>

[johneva]

Oh yeah so it has good job I dont use it then.

[Chocolate570]

Inline CSS, from what I know, is only restricted in the strict XHTML doctype.

[boen_robot]

Lie? I learn it from W3C http://www.w3.org/TR/xhtml11/doctype.htmlStyle Attribute Module DeprecatedThere is more incoming! They (W3C) are hunting img tag now, it will be changed to "embedded object(attribute)". But first ALL styles and scripts will be removed from XHTML-document. That's the way things go in future.edit:sorry, img won't be as object tag: hard to say what this is, it's as an image embedded to p -tag <p src="pic1.png" srctype="image/png">my 1st XHTML2 photo</p>

OK. I was wrong. I'm guilty as charged . I did saw the one for the img though. Somewhere around this forum I found some FAQ about XHTML's future and the images inside every element (not only p's) is truly something I liked. I mean how cool is to have a media load and a styled text to load on fallback .

[justsomeguy]

I don't know why they want to get rid of the style attribute. Sometimes inline styles are a good way to go, they are messing with the cascading nature of CSS when they remove that. Styles are applied in this order:Browser defaultExternal style sheetInternal style sheet (inside the <head> tag)Inline style (inside an HTML element)So they want to remove the last one, and screw up the cascading order? So if we want one element with different style, it needs its own class?

[boen_robot]

So if we want one element with different style, it needs its own class?

Actually, you could even nowadays use ID for a single element. IDs are threated with a greather priority then classes, so it's simmilar to using the style attribute. However, inline styles are usefull when you don't have full control over the head styles, so yeah. I am wondering too why are they deprecating it now. It's not the moment for such deprecation I think, but still- there is equivalent, so it's not that bad.

[Jack McKalling]

I agree with justsomeguy. Inline styles should stay un-depreciated (?) rather than leaving the only possibility of using IDs/classes.-Actually, the browser stylesheet has the upmost priority, am I wrong?

[zachary]

Ive never tried this before but try: <img src="http://somedomain.com/images/logo.png" align="" /> .

[justsomeguy]

-Actually, the browser stylesheet has the upmost priority, am I wrong?

The browser's default styles are lowest priority, you only see the default font, size, colors etc if there are no styles defined that override the defaults.

Ive never tried this before but try: <img src="http://somedomain.com/images/logo.png" align="" /> .

What is that supposed to do? There's no point to having the align attribute be there at all, and you shouldn't use it anyway because it's deprecated man! Stop using align! Don't make me put you on notice!

[scott100]

You can also set styles as !important, these styles will have highest priority (over inline + id for example), not sure about user defined styles though...<head><style>p{color:green !important;}#para{color:purple;}</style></head><body><p id="para" style="color:red">I am a paragraph</p></body>This would result in the paragraph being green.

[snowboard01]

!important I've never heard of it! I have some links that are set to be simple and some really flashy ones sometimes the flashy ones take the style of the simple ones I'll try the important thing.