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]

"Stan Brown" <th************ @fastmail.fm> wrote in message
news:MP******** *************** *@news.odyssey. net...

In article <ZPw_a.56801$Ne .28257@fed1read 03> in
comp.infosystem s.www.authoring.stylesheets, George Ziniewicz
<zi**@cox.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

[Els]

"George Ziniewicz" <zi**@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.
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

[George Ziniewicz]

"Els" <el*********@PL EASEtiscali.nl> wrote in message
news:bh******** **@reader1.tisc ali.nl...

"George Ziniewicz" <zi**@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.

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

zin

[Els]

"George Ziniewicz" <zi**@cox.net > schreef in bericht
news:FfT_a.23$k P.9@fed1read03. ..

"Els" <el*********@PL EASEtiscali.nl> wrote in message
news:bh******** **@reader1.tisc ali.nl...

"George Ziniewicz" <zi**@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 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:10 0%; 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]

"Els" <el*********@PL EASEtiscali.nl> wrote in message
news:bh******** **@reader1.tisc ali.nl...

"George Ziniewicz" <zi**@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 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:10 0%; 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,

Mine does, unless you mean an older rev.

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...

so you have to put the 100% height in the styles for html, body, and
table.

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]

"George Ziniewicz" <zi**@cox.net > wrote in message
news:Oq5%a.217$ kP.145@fed1read 03...

"Els" <el*********@PL EASEtiscali.nl> wrote in message
news:bh******** **@reader1.tisc ali.nl...

>
> "George Ziniewicz" <zi**@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 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:10 0%; 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,

Mine does, unless you mean an older rev.

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...

so you have to put the 100% height in the styles for html, body, and
table.

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.

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]

"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='centeredPi c.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

[Thomas Mlynarczyk]

[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

[George Ziniewicz]

"Els" <el************ ***@tiscali.nl. invalid> wrote in message
news:bh******** **@reader1.tisc ali.nl...

"Thomas Mlynarczyk" <bl************ *@hotmail.com> schreef in bericht
news:bh******** *****@news.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