Setting [I]width [/I]to the width of the image worked, but that means that the [I]div [/I]must have internal knowledge of the image. That means you have to have a new div for each image you use. ?
You can then set the image's container div to the image's width using javascript. [/quote]
I try to avoid scripting languages. There are too many of them and most of the functionality I need in a webpage is already available through HTML/CSS. This situation should actually improve with HTML-5, but I'll reserve judgement until 5 is ratified and I start to use it. Call me a Luddite if you will, but I cannot see the sense in using technology for the sake of using technology. My engineering background tells me that the simpler solution is usually the most reliable.
However, it would appear that there is no generic means to centre a graphic using CSS and that the validatable solution remains:
Regarding My engineering background tells me that the simpler solution is usually the most reliable. [/QUOTE] "simple" is a relative term. For me, the simplest solutuon is to write 2-3 lines of js code and I would get the effect you require. But what is simple for me might not be simple for others and vice-versa.
[/QUOTE] Nope. That will center only text and inline elements, not the block elements which might be inside. Could be: <i> </i>.center-image *{ display:block; margin-left:auto; margin-right:auto; }
@criterion9May 11.2010 — #Nope. That will center only text and inline elements, not the block elements which might be inside. Could be: <i> </i>.center-image *{ display:block; margin-left:auto; margin-right:auto; } [/QUOTE]
@KorMay 11.2010 — #Images aren't block-level elements though...[/QUOTE] It depends on the browser, though... ? And you'd better make them to be so (block), and, most of the time, it is better to envelop them inside a DIV, to prevent an IE silly bug: an extra pixel below the image... ?. Even better might be using DIVs with a CSS class and a background-image. easier to handle, though ?
Criterion9's solution (adding the line [I]"text-align: center;"[/I] to the div declaration) produced the desired result. Aarrgghhh!:mad: How simple is that! Still, it's always something obvious that you miss.
My thanks to Tirna and everyone who responded to my RFI.