By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,784 Members | 1,188 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,784 IT Pros & Developers. It's quick & easy.

CSS/image/"alignment"

P: n/a
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
Apr 27 '06 #1
Share this Question
Share on Google+
9 Replies


P: n/a
Deciding to do something for the good of humanity, Oliver Block
<ol**********@epost.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
Apr 27 '06 #2

P: n/a
In article <4b*************@news.dfncis.de>,
Oliver Block <ol**********@epost.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
Apr 28 '06 #3

P: n/a
Deciding to do something for the good of humanity, axlq
<ax**@spamcop.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
Apr 28 '06 #4

P: n/a
Mark Parnell <we*******@clarkecomputers.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
Apr 28 '06 #5

P: n/a
Deciding to do something for the good of humanity, Spartanicus
<in*****@invalid.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
Apr 28 '06 #6

P: n/a
In article <km********************************@news.spartanic us.utvinternet.ie>,
Spartanicus <in*****@invalid.invalid> wrote:
Mark Parnell <we*******@clarkecomputers.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
Apr 28 '06 #7

P: n/a
On Fri, 28 Apr 2006 00:27:31 +0000 (UTC) axlq <ax**@spamcop.net> wrote:

| In article <4b*************@news.dfncis.de>,
| Oliver Block <ol**********@epost.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/ |
-----------------------------------------------------------------------------
Apr 29 '06 #8

P: n/a
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

Apr 30 '06 #9

P: n/a

"Oliver Block" <ol**********@epost.de> wrote in message
news:4b*************@news.dfncis.de...
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;
}
May 2 '06 #10

This discussion thread is closed

Replies have been disabled for this discussion.