centering images vertically...

[George Ziniewicz]

..

I try to use CSS when possible, though I am still learning and don't maximize its use.

In particular, I still use a table to provide for a centered image in a few slideshows (though table vertical align doesn't work in Mozilla):

http://zintel.com/homepics.html

I've used combinations of <center>, style align 'center', table cell align, valign and height='100%' to get what I want, but I wonder if CSS can do it by itself.

I've tried CSS to align images centrally along the horizontal and vertical but get nowhere vertically, should that be possible (I assume I could do it with a fetch of pic width and height and absolute positioning, but it seems I should let the browser do that with a style align property)

What would be the best way to align an image horizontally and vertically within the available windowspace using CSS?

zin

--

http://www.zintel.com

[George Ziniewicz]

Re: centering images vertically...

"Stan Brown" <the_stan_brown @fastmail.fm> wrote in message
news:MPG.19a49f c7ab26558798b13 c@news.odyssey. net...[color=blue]
> In article <ZPw_a.56801$Ne .28257@fed1read 03> in
> comp.infosystem s.www.authoring.stylesheets, George Ziniewicz
> <zin1@cox.net > wrote:[color=green]
> > In particular, I still use a table to provide for a centered image in a[/color][/color]
few slideshows[color=blue][color=green]
> >(though table vertical align doesn't work in Mozilla):[/color]
>
> I don't understand this statement. I use vertical-align all the time
> in tables, and it seems to work just fine in Mozilla 1.4 as it did
> in 1.2. Have you tried validating your HTML and your CSS?[/color]

Not for a few versions, I'll try it.

I'm speaking of centered images (of differing sizes) in the single cell
of a full-window-size table, or a centered table with tight-wrapping of an
image within a cell, either way I get a completely window/document centered
image (though I'd prefer the tight-wrapped version because I have a simple
drop-shadow effect for that one).
The only combination I've got to work in IE is when using a <table
height='100%'.. .> which appears to not work on my Mozilla, not surprising
since the table height attribute seems missing in the spec, and so the table
stays at the top center of the window. I may have missed some combination,
I'll write a small test_table html program and try again.
I use:
<table height='100%' width='100%' border='0'>
<tr>
<td align='center' valign='middle' >

and an img tag w/ no alignment specifiers, which gives me a centered
image in IE and a top-centered image in Mozilla. The use of various style
attributes in various places didn't work for me, but I'll give it a go
again.



[color=blue][color=green]
> > http://zintel.com/homepics.html[/color]
>
> Your "CSS version" of Rocky Point did not work at all for me --
> perhaps because when I view source it was full of Javascript.[/color]

Sorry! To me in my infancy, CSS goes with Javascript. By the name I
meant that I replaced an earlier FRAMES version (which replaced an earlier
TABLES version) with a version that uses mostly CSS for positioning. I'll
change the identifier, thanks.



[color=blue]
> If you're going to link to a JavaScript version and a CSS version of
> the same thing, it seems a bit much to have JavaScript in both![/color]

Crazy I know. These are simply the original names of the links, I
haven't gone back to reconsider what to call them as I've upgraded with now
my 5th version of a slideshow which went from pure IE javascript with a
table and minimal controls, to frames to css to [allegedly] cross-browser,
full-screen, zoom with an extensive draggable/hideable menu and multiple
folders. I should move them all to another separate slideshow page where I
can describe them all in detail, or just drop them all for one good
cross-browser version. More to do...

And when I say cross-browser, all I can test on is IE5, Mozilla 1.4 and
Netscape 7.

zin

[Els]

Re: centering images vertically...


"George Ziniewicz" <zin1@cox.net > schreef in bericht
news:ZPw_a.5680 1$Ne.28257@fed1 read03...[color=blue]
> I try to use CSS when possible, though I am still learning and don't[/color]
maximize its use.[color=blue]
>
> In particular, I still use a table to provide for a centered
> image in a few slideshows (though table vertical align
> doesn't work in Mozilla):
>
> http://zintel.com/homepics.html
>
> I've used combinations of <center>, style align 'center',
> table cell align, valign and height='100%' to get what I
> want, but I wonder if CSS can do it by itself.
>
> I've tried CSS to align images centrally along the
> horizontal and vertical but get nowhere vertically,
> should that be possible (I assume I could do it with
> a fetch of pic width and height and absolute positioning,
> but it seems I should let the browser do that with a
> style align property)
>
> What would be the best way to align an image
> horizontally and vertically within the available
> windowspace using CSS?[/color]

In alt.html was a thread with subject 'center vertical', starting on
9-8-2003.
The answer to your question is in the end of it, with an example:

http://karlcore.com/100pcttable/100pctcsswithdtd.php

Hope this helps,
sincerely,
Els

[George Ziniewicz]

Re: centering images vertically...

"Els" <els.aNOSPAM@PL EASEtiscali.nl> wrote in message
news:bhgqao$ch9 $1@reader1.tisc ali.nl...[color=blue]
>
> "George Ziniewicz" <zin1@cox.net > schreef in bericht
> news:ZPw_a.5680 1$Ne.28257@fed1 read03...[color=green]
> > I try to use CSS when possible, though I am still learning and don't[/color]
> maximize its use.[color=green]
> >
> > In particular, I still use a table to provide for a centered
> > image in a few slideshows (though table vertical align
> > doesn't work in Mozilla):
> >
> > http://zintel.com/homepics.html
> >
> > I've used combinations of <center>, style align 'center',
> > table cell align, valign and height='100%' to get what I
> > want, but I wonder if CSS can do it by itself.
> >
> > I've tried CSS to align images centrally along the
> > horizontal and vertical but get nowhere vertically,
> > should that be possible (I assume I could do it with
> > a fetch of pic width and height and absolute positioning,
> > but it seems I should let the browser do that with a
> > style align property)
> >
> > What would be the best way to align an image
> > horizontally and vertically within the available
> > windowspace using CSS?[/color]
>
> In alt.html was a thread with subject 'center vertical', starting on
> 9-8-2003.
> The answer to your question is in the end of it, with an example:
> http://karlcore.com/100pcttable/100pctcsswithdtd.php
>
> Hope this helps,[/color]

Thanks! I was using table align attributes, and all it really required
was a style height attribute, somehow I missed that.

<table border='1' style='width:10 0%; height:100%;'>
<tr>
<td align='center'>
<img src='aCentered. jpg'>
</td>
</tr>

zin

[Els]

Re: centering images vertically...


"George Ziniewicz" <zin1@cox.net > schreef in bericht
news:FfT_a.23$k P.9@fed1read03. ..[color=blue]
> "Els" <els.aNOSPAM@PL EASEtiscali.nl> wrote in message
> news:bhgqao$ch9 $1@reader1.tisc ali.nl...[color=green]
> >
> > "George Ziniewicz" <zin1@cox.net > schreef in bericht
> > news:ZPw_a.5680 1$Ne.28257@fed1 read03...[color=darkred]
> > > I try to use CSS when possible, though I am still learning
> > > and don't maximize its use.
> > >
> > > What would be the best way to align an image
> > > horizontally and vertically within the available
> > > windowspace using CSS?[/color]
> >
> > In alt.html was a thread with subject 'center vertical', starting[/color][/color]
on[color=blue][color=green]
> > 9-8-2003.
> > The answer to your question is in the end of it, with an example:
> > http://karlcore.com/100pcttable/100pctcsswithdtd.php[/color]
>
> Thanks! I was using table align attributes, and all it really
> required was a style height attribute, somehow I missed that.
>
> <table border='1' style='width:10 0%; height:100%;'>
> <tr>
> <td align='center'>
> <img src='aCentered. jpg'>
> </td>
> </tr>[/color]

No, you need to do more: put a height: 100% style attribute to html
and body as well!
Try it:
if you take out the height: 100% from the body, Mozilla and Netscape
won't display a full height table,
if you take out the height: 100% from the html, none of the browsers
will display a full height table,
so you have to put the 100% height in the styles for html, body, and
table.

Sincerely,
Els

[George Ziniewicz]

Re: centering images vertically...

"Els" <els.aNOSPAM@PL EASEtiscali.nl> wrote in message
news:bhi28t$399 $1@reader1.tisc ali.nl...[color=blue]
>[color=green][color=darkred]
> > >
> > > "George Ziniewicz" <zin1@cox.net > schreef in bericht
> > > news:ZPw_a.5680 1$Ne.28257@fed1 read03...
> > > > I try to use CSS when possible, though I am still learning
> > > > and don't maximize its use.
> > > >
> > > > What would be the best way to align an image
> > > > horizontally and vertically within the available
> > > > windowspace using CSS?
> > >
> > > In alt.html was a thread with subject 'center vertical', starting[/color][/color]
> on 9-8-2003.[color=green][color=darkred]
> > > The answer to your question is in the end of it, with an example:
> > > http://karlcore.com/100pcttable/100pctcsswithdtd.php[/color]
> >
> > Thanks! I was using table align attributes, and all it really
> > required was a style height attribute, somehow I missed that.
> >
> > <table border='1' style='width:10 0%; height:100%;'>
> > <tr>
> > <td align='center'>
> > <img src='aCentered. jpg'>
> > </td>
> > </tr>[/color]
>
> No, you need to do more: put a height: 100% style attribute to html
> and body as well!
> Try it:
> if you take out the height: 100% from the body, Mozilla and Netscape
> won't display a full height table,[/color]

Mine does, unless you mean an older rev.

[color=blue]
> if you take out the height: 100% from the html, none of the browsers
> will display a full height table,[/color]

Mine do. Frustrating for someone trying to learn...

[color=blue]
> so you have to put the 100% height in the styles for html, body, and
> table.[/color]

Using just a table style, this works on my IE5, Netscape 7.1 and Mozilla
1.4:

<head>
<title>100% Table With CSS, Valid HTML Strict</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table border='1' style='width:10 0%; height:100%;'>
<tr>
<td align='center'> <img src='bluclouds. jpg'></td>
</tr>
</table>
</body>
</html>

My initial problem seems to be not trying the style height and width
100%. With CSS it seems best to minimize use of HTML positioning
attributes.

zin

[George Ziniewicz]

Re: centering images vertically...

"George Ziniewicz" <zin1@cox.net > wrote in message
news:Oq5%a.217$ kP.145@fed1read 03...[color=blue]
> "Els" <els.aNOSPAM@PL EASEtiscali.nl> wrote in message
> news:bhi28t$399 $1@reader1.tisc ali.nl...[color=green]
> >[color=darkred]
> > > >
> > > > "George Ziniewicz" <zin1@cox.net > schreef in bericht
> > > > news:ZPw_a.5680 1$Ne.28257@fed1 read03...
> > > > > I try to use CSS when possible, though I am still learning
> > > > > and don't maximize its use.
> > > > >
> > > > > What would be the best way to align an image
> > > > > horizontally and vertically within the available
> > > > > windowspace using CSS?
> > > >
> > > > In alt.html was a thread with subject 'center vertical', starting[/color]
> > on 9-8-2003.[color=darkred]
> > > > The answer to your question is in the end of it, with an example:
> > > > http://karlcore.com/100pcttable/100pctcsswithdtd.php
> > >
> > > Thanks! I was using table align attributes, and all it really
> > > required was a style height attribute, somehow I missed that.
> > >
> > > <table border='1' style='width:10 0%; height:100%;'>
> > > <tr>
> > > <td align='center'>
> > > <img src='aCentered. jpg'>
> > > </td>
> > > </tr>[/color]
> >
> > No, you need to do more: put a height: 100% style attribute to html
> > and body as well!
> > Try it:
> > if you take out the height: 100% from the body, Mozilla and Netscape
> > won't display a full height table,[/color]
>
> Mine does, unless you mean an older rev.
>
>[color=green]
> > if you take out the height: 100% from the html, none of the browsers
> > will display a full height table,[/color]
>
> Mine do. Frustrating for someone trying to learn...
>
>[color=green]
> > so you have to put the 100% height in the styles for html, body, and
> > table.[/color]
>
> Using just a table style, this works on my IE5, Netscape 7.1 and[/color]
Mozilla 1.4:[color=blue]
>
> <head>
> <title>100% Table With CSS, Valid HTML Strict</title>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
> </head>
> <body>
> <table border='1' style='width:10 0%; height:100%;'>
> <tr>
> <td align='center'> <img src='bluclouds. jpg'></td>
> </tr>
> </table>
> </body>
> </html>
>
> My initial problem seems to be not trying the style height and width
> 100%. With CSS it seems best to minimize use of HTML positioning
> attributes.[/color]

Things get wierder and wierder. Though the above code works on its own
for me, incorporating it into my larger slideshow program doesn't, going
back to the simple case of an image in a table I noticed the simple
inclusion of
a div changed vertical alignment. Investigating it showed that the weblink
article described what I ultimately had to do: go 100% style:height on html,
body,
and table. This stuff is quirky!

This finally worked on both IE & Mozilla at least:

<style type='text/css'>
html{height:100 %;}
body{background :#111111; height:100%;}
table{width:100 %; height:100%;}
</style>
..
..
..
<table border='0'>
<tr><td align='center'>
<img src='centeredPi c.jpg' name='pic' id='pic'>
</td></tr>
</table>

Don't know why the table centering doesn't work in a div, but I removed
it as it is non-essential in this app.

zin

[Els]

Re: centering images vertically...


"George Ziniewicz":[color=blue]
> "George Ziniewicz":[color=green]
> > "Els":[color=darkred]
> > > > > "George Ziniewicz":[/color][/color][/color]
[color=blue][color=green][color=darkred]
> > > > > > What would be the best way to align an image
> > > > > > horizontally and vertically within the available
> > > > > > windowspace using CSS?[/color][/color][/color]
[color=blue][color=green][color=darkred]
> > > > > http://karlcore.com/100pcttable/100pctcsswithdtd.php[/color][/color][/color]
[color=blue][color=green][color=darkred]
> > > > Thanks! I was using table align attributes, and all it
> > > > really required was a style height attribute, somehow
> > > > I missed that.[/color][/color][/color]
[color=blue][color=green][color=darkred]
> > > No, you need to do more: put a height: 100% style
> > > attribute to html and body as well!
> > > Try it:
> > > if you take out the height: 100% from the body, Mozilla
> > > and Netscape won't display a full height table,[/color][/color][/color]
[color=blue][color=green]
> > Mine does, unless you mean an older rev.[/color][/color]

My Netscape 7.1 doesn't...
[color=blue][color=green][color=darkred]
> > > if you take out the height: 100% from the html, none of the
> > > browsers will display a full height table,[/color][/color][/color]
[color=blue][color=green]
> > Mine do. Frustrating for someone trying to learn...
> > Using just a table style, this works on my IE5, Netscape 7.1
> > and Mozilla 1.4[/color][/color]

I tested it only on Opera 7.11, Netscape 7.1, Mozilla's Firebird and
IE 6.0...
[color=blue][color=green]
> > My initial problem seems to be not trying the style height
> > and width 100%. With CSS it seems best to minimize
> > use of HTML positioning attributes.[/color]
> Things get wierder and wierder. Though the above code
> works on its own for me, incorporating it into my larger
> slideshow program doesn't, going back to the simple case
> of an image in a table I noticed the simple inclusion of
> a div changed vertical alignment. Investigating it showed
> that the weblink article described what I ultimately had to
> do: go 100% style:height on html, body, and table.
> This stuff is quirky!
>
> This finally worked on both IE & Mozilla at least:
>
> <style type='text/css'>
> html{height:100 %;}
> body{background :#111111; height:100%;}
> table{width:100 %; height:100%;}
> </style>
> .
> .
> .
> <table border='0'>
> <tr><td align='center'>
> <img src='centeredPi c.jpg' name='pic' id='pic'>
> </td></tr>
> </table>
>
> Don't know why the table centering doesn't work in
> a div,[/color]

Maybe you have to put 100% height on that div as well, as it seems to
me that all the (grand)parents have to be 100% height.
(don't know, haven't tested that yet) If a 100% height table is
inside a div, 100% will only mean 100% of the available height in that
div, so if the div has no specified height... neither has the table
inside of it. (I'm just guessing that you didn't specify a height on
that div, if you did, I don't know the answer to the problem either)

Sincerely,
Els

[Thomas Mlynarczyk]

Re: centering images vertically...

[Vertical centering in tables]

Well, tables are comparatively easy to deal with. But how can I center an
image vertically in, say, a div?

Curious,
Thomas

[Thomas Mlynarczyk]

Re: centering images vertically...

Also sprach Els:
[color=blue][color=green]
>> Well, tables are comparatively easy to deal with. But how can I
>> center an image vertically in, say, a div?[/color][/color]
[color=blue]
> I wish I knew :([/color]

Would something like "line-height:100%" work? Also, I think there is
something like "display:ta ble-cell" (don't remember the correct syntax)
which should make "vertical-align:middle" work, but it's not for older
browsers. So, does this mean the people who invented CSS simply forgot to
implement such a basic feature?

Thomas

[George Ziniewicz]

Re: centering images vertically...

"Els" <els.aNOSPAMPLE ASE@tiscali.nl. invalid> wrote in message
news:bhjc1o$s6o $1@reader1.tisc ali.nl...[color=blue]
>
> "Thomas Mlynarczyk" <blue_elephant5 5@hotmail.com> schreef in bericht
> news:bhja5g$lvo $04$1@news.t-online.com...[color=green]
> > [Vertical centering in tables]
> >
> > Well, tables are comparatively easy to deal with. But how can I[/color]
> center an[color=green]
> > image vertically in, say, a div?
> >
> > Curious,
> > Thomas[/color]
>
> I wish I knew :([/color]

I've written some code to center an arbitrary image in a 100%/100% div,
but to center it in an arbitrarily sized div requires getting the
div.style.width & height which I can't seem to get, I can set them but not
get them in IE.

zin

[Els]

Re: centering images vertically...


"Thomas Mlynarczyk" <blue_elephant5 5@hotmail.com> schreef in bericht
news:bhjg86$grh $05$1@news.t-online.com...[color=blue]
> Also sprach Els:
>[color=green][color=darkred]
> >> Well, tables are comparatively easy to deal with. But how
> >> can I center an image vertically in, say, a div?[/color][/color]
>[color=green]
> > I wish I knew :([/color]
>
> Would something like "line-height:100%" work?[/color]

Don't know. Try it. (if it works, tell me :-))
[color=blue]
> Also, I think there is something like "display:ta ble-cell" (don't
> remember the correct syntax) which should make
> "vertical-align:middle" work,[/color]

I doubt that: vertical-align: middle, makes an image appear vertically
centered in a line of text. AFAIK it doesn't put the image (or the
text) in the middle of a cell. But in a 'real td', inside a 'real tr'
with specified height, text and images are automatically vertically
centered. (again: AFAIK)
[color=blue]
> but it's not for older browsers.[/color]

Correct, I just read in alt.html: .......things in CSS like
'display:table-cell;' (which doesn't work in IE)............ ... (by
Toby A Inkster)
[color=blue]
> So, does this mean the people who invented CSS simply
> forgot to implement such a basic feature?[/color]

I sure hope not!
I guess it's just a matter of time for us to find out how to do it.

- If they didn't implement such feature, they probably _do_ want us
to use tables for lay-out purposes ;-))) - or they want us to ditch
IE....;-)

Sincerely,
Els

[Els]

Re: centering images vertically...


"George Ziniewicz" <zin1@cox.net > schreef in bericht
news:HQb%a.249$ kP.162@fed1read 03...[color=blue]
> "Els" <els.aNOSPAMPLE ASE@tiscali.nl. invalid> wrote in message
> news:bhjc1o$s6o $1@reader1.tisc ali.nl...[color=green]
> >
> > "Thomas Mlynarczyk" <blue_elephant5 5@hotmail.com> schreef in[/color][/color]
bericht[color=blue][color=green]
> > news:bhja5g$lvo $04$1@news.t-online.com...[color=darkred]
> > > [Vertical centering in tables]
> > >
> > > Well, tables are comparatively easy to deal with. But how can I[/color]
> > center an[color=darkred]
> > > image vertically in, say, a div?
> > >
> > > Curious,
> > > Thomas[/color]
> >
> > I wish I knew :([/color]
>
> I've written some code to center an arbitrary image in a[/color]
100%/100% div,

html/css code?
Can I see it? I'd like to 'fiddle' with it to see if I can come up
with anything.

(if it isnt html/css - don't bother, I won't be able to understand it
;-))
[color=blue]
> but to center it in an arbitrarily sized div requires getting the
> div.style.width & height which I can't seem to get, I can set them[/color]
but not[color=blue]
> get them in IE.[/color]

Sincerely,
Els

[Els]

Re: centering images vertically...


"Els" <els.aNOSPAMPLE ASE@tiscali.nl. invalid> schreef in bericht
news:bhji1m$3nb $1@reader1.tisc ali.nl...[color=blue]
>
> "Thomas Mlynarczyk" <blue_elephant5 5@hotmail.com> schreef in bericht
> news:bhjg86$grh $05$1@news.t-online.com...[color=green]
> > Also sprach Els:[/color][/color]

-snip: how to vertically center an image inside a div; possible or
not?-

I just read parts of an interesting thread :-(

http://lists.w3.org/Archives/Public/www-style/2003Jul/0011.html

Am still reading, therefore: still hoping...

Sincerely,
Els

[Els]

Re: centering images vertically...


"Els" :[color=blue]
> "Els":
>
> -snip: how to vertically center an image inside a div; possible or
> not?-
>
> I just read parts of an interesting thread :-(
>
> http://lists.w3.org/Archives/Public/...3Jul/0011.html
>
> Am still reading, therefore: still hoping...[/color]

Well, I got tired of reading, I did find something useful, though:

http://www.wpdfd.com/editorial/wpd0103.htm#toptip

but (always a but :-( ), it only works if you know the height and
width of the image! Which I don't know in my particular case. (various
photos, one per page, over 500 pages...)

Don't know about anyone else, but I just gave up on trying to throw
out my lay-out tables for the love of CSS!

One good thing I read in the a.m. thread: (message
http://lists.w3.org/Archives/Public/...3Jul/0047.html )

<quote>
By the way, this isn't necessarily invalid HTML. The W3C's Web
Content Accessibility Guidelines allow for the use of tables for
layout, as long as (a) the page makes sense when the table is
linearized, (b) the markup is correct -- summary="", no
axis/scope/headers/<th>, and (c) the document type is Transitional
(required so you can use all the layout-friendly attributes, not
because layout tables _must_ be Transitional -- they can be Strict
too).

Layout tables are _not_ improper HTML, and they are, by and large,
_not_ an accessibility problem if done correctly -- the same applies
to frames, by the way.
</quote>

So, instead of searching for this centering/img/div thing, I'll have a
more indepth look into table structure ;-) (never used a <th> or a
summary, and never heard of axis or scope...)

Well, it's past midnight here, so goodnight. I'll dream of using
lay-out tables with no tabular data at all _and_ have a clear
conscience! Life can be so easy... ;-)

Els