centering images vertically...

..

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

"Stan Brown" <the_stan_brown (AT) fastmail (DOT) fm> wrote

In article <ZPw_a.56801$Ne.28257@fed1read03> in
comp.infosystems.www.authoring.stylesheets, George Ziniewicz
zin1 (AT) cox (DOT) net> wrote:
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):

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?

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.

http://zintel.com/homepics.html

Your "CSS version" of Rocky Point did not work at all for me --
perhaps because when I view source it was full of Javascript.

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.

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!

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

"George Ziniewicz" <zin1 (AT) cox (DOT) net> schreef in bericht
news:ZPw_a.56801$Ne.28257 (AT) fed1read03 (DOT) ..

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?

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

"Els" <els.aNOSPAM (AT) PLEASEtiscali (DOT) nl> wrote

"George Ziniewicz" <zin1 (AT) cox (DOT) net> schreef in bericht
news:ZPw_a.56801$Ne.28257 (AT) fed1read03 (DOT) ..
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?

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,

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:100%; height:100%;'>
<tr>
<td align='center'>
<img src='aCentered.jpg'>
</td>
</tr>

zin

"George Ziniewicz" <zin1 (AT) cox (DOT) net> schreef in bericht
news:FfT_a.23$kP.9 (AT) fed1read03 (DOT) ..

"Els" <els.aNOSPAM (AT) PLEASEtiscali (DOT) nl> wrote in message
news:bhgqao$ch9$1 (AT) reader1 (DOT) tiscali.nl...

"George Ziniewicz" <zin1 (AT) cox (DOT) net> schreef in bericht
news:ZPw_a.56801$Ne.28257 (AT) fed1read03 (DOT) ..
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
on
9-8-2003.
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:100%; height:100%;'
tr
td align='center'
img src='aCentered.jpg'
/td
/tr

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":

"George Ziniewicz":
"Els":
"George Ziniewicz":

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

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.

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,

Mine does, unless you mean an older rev.

My Netscape 7.1 doesn't...

if you take out the height: 100% from the html, none of the
browsers will display a full height table,

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

I tested it only on Opera 7.11, Netscape 7.1, Mozilla's Firebird and
IE 6.0...

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.
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='centeredPic.jpg' name='pic' id='pic'
/td></tr
/table

Don't know why the table centering doesn't work in
a div,

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

[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

Also sprach Els:

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

I wish I knew

Would something like "line-height:100%" work? Also, I think there is
something like "display:table-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

"Els" <els.aNOSPAMPLEASE (AT) tiscali (DOT) nl.invalid> wrote

"Thomas Mlynarczyk" <blue_elephant55 (AT) hotmail (DOT) com> schreef in bericht
news:bhja5g$lvo$04$1 (AT) news (DOT) t-online.com...
[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

I wish I knew

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

"Thomas Mlynarczyk" <blue_elephant55 (AT) hotmail (DOT) com> schreef in bericht
news:bhjg86$grh$05$1 (AT) news (DOT) t-online.com...

Also sprach Els:

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

I wish I knew

Would something like "line-height:100%" work?

Don't know. Try it. (if it works, tell me :-))

Also, I think there is something like "display:table-cell" (don't
remember the correct syntax) which should make
"vertical-align:middle" work,

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)

but it's not for older browsers.

Correct, I just read in alt.html: .......things in CSS like
'display:table-cell;' (which doesn't work in IE)............... (by
Toby A Inkster)

So, does this mean the people who invented CSS simply
forgot to implement such a basic feature?

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