468,780 Members | 2,264 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,780 developers. It's quick & easy.

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
Jul 20 '05 #1
19 5440
"Stan Brown" <th************@fastmail.fm> wrote in message
news:MP************************@news.odyssey.net.. .
In article <ZPw_a.56801$Ne.28257@fed1read03> in
comp.infosystems.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

Jul 20 '05 #2
Els

"George Ziniewicz" <zi**@cox.net> schreef in bericht
news:ZPw_a.56801$Ne.28257@fed1read03...
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
Jul 20 '05 #3
"Els" <el*********@PLEASEtiscali.nl> wrote in message
news:bh**********@reader1.tiscali.nl...

"George Ziniewicz" <zi**@cox.net> schreef in bericht
news:ZPw_a.56801$Ne.28257@fed1read03...
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
Jul 20 '05 #4
Els

"George Ziniewicz" <zi**@cox.net> schreef in bericht
news:FfT_a.23$kP.9@fed1read03...
"Els" <el*********@PLEASEtiscali.nl> wrote in message
news:bh**********@reader1.tiscali.nl...

"George Ziniewicz" <zi**@cox.net> schreef in bericht
news:ZPw_a.56801$Ne.28257@fed1read03...
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

Jul 20 '05 #5
"Els" <el*********@PLEASEtiscali.nl> wrote in message
news:bh**********@reader1.tiscali.nl...

"George Ziniewicz" <zi**@cox.net> schreef in bericht
news:ZPw_a.56801$Ne.28257@fed1read03...
> 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,


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:100%; 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

Jul 20 '05 #6
"George Ziniewicz" <zi**@cox.net> wrote in message
news:Oq5%a.217$kP.145@fed1read03...
"Els" <el*********@PLEASEtiscali.nl> wrote in message
news:bh**********@reader1.tiscali.nl...
>
> "George Ziniewicz" <zi**@cox.net> schreef in bericht
> news:ZPw_a.56801$Ne.28257@fed1read03...
> > 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,


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:100%; 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='centeredPic.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

Jul 20 '05 #7
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

Jul 20 '05 #8
[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

Jul 20 '05 #9
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

Jul 20 '05 #10
"Els" <el***************@tiscali.nl.invalid> wrote in message
news:bh**********@reader1.tiscali.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
Jul 20 '05 #11
Els

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

Jul 20 '05 #12
Els

"George Ziniewicz" <zi**@cox.net> schreef in bericht
news:HQb%a.249$kP.162@fed1read03...
"Els" <el***************@tiscali.nl.invalid> wrote in message
news:bh**********@reader1.tiscali.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,

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


Sincerely,
Els


Jul 20 '05 #13
Els

"Els" <el***************@tiscali.nl.invalid> schreef in bericht
news:bh**********@reader1.tiscali.nl...

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

Sincerely,
Els
Jul 20 '05 #14
Els

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


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


Jul 20 '05 #15
In article <bh*************@news.t-online.com>, Thomas Mlynarczyk wrote:
[Vertical centering in tables]

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


div {display:table-cell;vertical-align:middle}

IIRC works on some version of Opera

or

div {position:relative;min-height:10px;min-width:10px;height:3em}
img {position:absolute;top:0;left:0;right:0;bottom:0;
margin:auto;width:10px;height:10px;}

Works on Mozilla and Opera IIRC.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #16
Els
Can anyone tell me why this complete thread (from George
Ziniewicz message on 13-8-2003 22.05 to my own message on
16-8-2003 0.14 gets an error in Netscape 7.1's mailclient:

Error!
newsgroup server responded:Bad article number
Perhaps the article has expired
<bh**********@reader1.tiscali.nl> (48341)
Click here to remove all expired articles

(I had already downloaded and read them before, but now I
get this message instead), while in Outlook Express, I can
still read them all?

--
Els

A mente é egual á uma paraqueda; funciona melhor aberta.

Jul 20 '05 #17
Els
Evertjan. wrote:
Els wrote on 20 aug 2003 in comp.infosystems.www.authoring.stylesheets:

Can anyone tell me why this complete thread (from George
Ziniewicz message on 13-8-2003 22.05 to my own message on
16-8-2003 0.14 gets an error in Netscape 7.1's mailclient:

Error!
newsgroup server responded:Bad article number
Perhaps the article has expired
<bh**********@reader1.tiscali.nl> (48341)
Click here to remove all expired articles

(I had already downloaded and read them before, but now I
get this message instead), while in Outlook Express, I can
still read them all?
Perhaps OE has them in cache ?


I thought of that, but I can't figure out why they are
expired on the server then. I didn't cancel my messages!
In the mean time I found out that all the messages in all
the newsgroups , except the alt. ones, before the 18th
approx.lunchtime GMT have expired.

Does anyone have an idea why?
Is it possible that I made a mistake of some sort in my
settings?
Misschien kan je beter een echte newsreader gebruiken ?
(Xnews, Agent, etc)

Ik zal eens Googelen. Ik vond Netscape (m.b.t. quote en sig
seperator) al een hele verbetering t.o.v. OE.

--
Els

A mente é egual á uma paraqueda; funciona melhor aberta.

Jul 20 '05 #18
Els wrote on 20 aug 2003 in comp.infosystems.www.authoring.stylesheets:
Misschien kan je beter een echte newsreader gebruiken ?
(Xnews, Agent, etc)

Ik zal eens Googelen. Ik vond Netscape (m.b.t. quote en sig
seperator) al een hele verbetering t.o.v. OE.


<http://xnews.newsguy.com/>

direct bruikbaar,
maar naarmate de ervaring met het pakket toeneemt zelfs iedere toets
instelbaar. Bij een verlopen mail wordt direct een klik link naar google
groups voorgesteld. Mail score waarden zijn programmeerbaar.

De maker Luu Tran is echter al een half jaar incommunicado.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 20 '05 #19
Els
Evertjan. wrote:
Els wrote on 20 aug 2003 in comp.infosystems.www.authoring.stylesheets:
Misschien kan je beter een echte newsreader gebruiken ?
(Xnews, Agent, etc)


Ik zal eens Googelen. Ik vond Netscape (m.b.t. quote en sig
seperator) al een hele verbetering t.o.v. OE.

<http://xnews.newsguy.com/>

Ziet er interessant uit, maar ik vind het onhandig
'schakelen' tussen de nieuwsgroepen. Ik wil graag zo'n
3-delig scherm als in OE en NS-mailclient.. kan zeker niet
met xnews? :-(

--
Els

A mente é egual á uma paraqueda; funciona melhor aberta.

Jul 20 '05 #20

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Geoff Soper | last post: by
7 posts views Thread by Aaron | last post: by
6 posts views Thread by Jerry Camel | last post: by
5 posts views Thread by Peter Lapic | last post: by
3 posts views Thread by John Pote | last post: by
5 posts views Thread by Markus Ernst | last post: by
1 post views Thread by =?Utf-8?B?ZnJhbmt5?= | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.