CSS/image/"alignment"

Hi,

what is the most elegent way to center an
image inside a web page.

The image is radomly chosen by a cgi script
may be 300x400 or 400x300.

Are there any alignment commands for images?

tia,

Oliver

Deciding to do something for the good of humanity, Oliver Block
<oliver.block (AT) epost (DOT) de> declared in
comp.infosystems.www.authoring.stylesheets:

Are there any alignment commands for images?

text-align, same as any other inline elements (yes, it probably should
have been called inline-align, but it's a bit late for that now).

--
Mark Parnell
My Usenet is improved; yours could be too:
http://blinkynet.net/comp/uip5.html

In article <4bcs1rF115a8pU1 (AT) news (DOT) dfncis.de>,
Oliver Block <oliver.block (AT) epost (DOT) de> wrote:

what is the most elegent way to center an
image inside a web page.

"Most elegant" would be "simplest" to me -- but that also happens to
be non-compliant with HTML Strict and doesn't use CSS.

So the next best way is:

(CSS) .imgcenter { display: inline; text-align: center; border: 0; }

(HTML) <img class="imgcenter" src="...." ...>

The display:inline is needed so that the image gets treated like
text, which can then be centered with text-align:center.

-A

Deciding to do something for the good of humanity, axlq
<axlq (AT) spamcop (DOT) net> declared in
comp.infosystems.www.authoring.stylesheets:

The display:inline is needed so that the image gets treated like
text, which can then be centered with text-align:center.

Images are inline by default.

--
Mark Parnell
My Usenet is improved; yours could be too:
http://blinkynet.net/comp/uip5.html

Deciding to do something for the good of humanity, Spartanicus
<invalid (AT) invalid (DOT) invalid> declared in
comp.infosystems.www.authoring.stylesheets:

Plus 'text-align:center' would need to be specified on a container
element, not on the image itself.

True. I assumed that's what axlq meant, though probably erroneously.
Then again I wasn't really clear about that in my reply to the OP
either. Whoops.

--
Mark Parnell
My Usenet is improved; yours could be too:
http://blinkynet.net/comp/uip5.html

Mark Parnell <webmaster (AT) clarkecomputers (DOT) com.au> wrote:

The display:inline is needed so that the image gets treated like
text, which can then be centered with text-align:center.

Images are inline by default.

Plus 'text-align:center' would need to be specified on a container
element, not on the image itself.

--
Spartanicus

In article <kmc352ltd203m2lbu5jgit3ddcobpv62am (AT) news (DOT) spartanicus.utvinternet.ie>,
Spartanicus <invalid (AT) invalid (DOT) invalid> wrote:

Mark Parnell <webmaster (AT) clarkecomputers (DOT) com.au> wrote:

The display:inline is needed so that the image gets treated like
text, which can then be centered with text-align:center.

Images are inline by default.

Then why am I having problems centering images unless I force them
to be inline?

Plus 'text-align:center' would need to be specified on a container
element, not on the image itself.

Woops. You're right. That's what I meant.

-A

On Fri, 28 Apr 2006 00:27:31 +0000 (UTC) axlq <axlq (AT) spamcop (DOT) net> wrote:

In article <4bcs1rF115a8pU1 (AT) news (DOT) dfncis.de>,
Oliver Block <oliver.block (AT) epost (DOT) de> wrote:
what is the most elegent way to center an
image inside a web page.

"Most elegant" would be "simplest" to me -- but that also happens to
be non-compliant with HTML Strict and doesn't use CSS.

So the next best way is:

(CSS) .imgcenter { display: inline; text-align: center; border: 0; }

(HTML) <img class="imgcenter" src="...." ...

The display:inline is needed so that the image gets treated like
text, which can then be centered with text-align:center.

In the principle of separation of content and style, the centering of the
images would be style. So of course specifying it in CSS would be right.
It's the class name that I would object to, because it implys the style
being coded in the HTML. Why not a class name like "randomimage", instead?
Then you can later change the style and align it differently without any
conflict in implied naming semantics.

--
-----------------------------------------------------------------------------

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

axlq wrote:

So the next best way is:

(CSS) .imgcenter { display: inline; text-align: center; border: 0; }

(HTML) <img class="imgcenter" src="...." ...

The display:inline is needed so that the image gets treated like
text, which can then be centered with text-align:center.

After reading all answers I come do the following conclusion:
I need to add style="text-align:center;" to the surrounding div tag.:-)

Thanks for your help.

Best Regards,

Oliver

"Oliver Block" <oliver.block (AT) epost (DOT) de> wrote

Hi,

what is the most elegent way to center an
image inside a web page.

The image is radomly chosen by a cgi script
may be 300x400 or 400x300.

Are there any alignment commands for images?

tia,

Oliver

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