Solved

Centering tables vertically...

Posted on 2000-04-02
13
465 Views
Last Modified: 2010-04-09
I tried to center an image vertically by putting spaces on top of it (<br> you know what I am talking about)

But it doesn't look the same in different resolution screen.

How can I center a table or an image vertically in a page?

Thanks...
-Hocam


0
Comment
Question by:Hocam
  • 4
  • 3
  • 3
  • +2
13 Comments
 
LVL 5

Accepted Solution

by:
tzarad earned 13 total points
ID: 2679022
An option is to use the style attribute:
position: absolute;
left: 100pt;
top: 100pt
And to set the top and the left via javascript after having tested the client screen resolution.

Hope it helps.
0
 

Expert Comment

by:Rain
ID: 2679074
<table width=whatever you wish  height=whatever  ie: 1-100% or use pixel values>
<tr>
<td>
<center>
<img src=the pic to be centered>
</center>
</td>
</tr>
</table>

hope this helps
0
 
LVL 5

Expert Comment

by:Christian_Wenz
ID: 2679216
this should work:
<TABLE HEIGHT="100%">
<TR><TD VALIGN="MIDDLE">
<IMG SRC="...">
</TD></TR>
</TABLE>
0
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 7

Expert Comment

by:nettrom
ID: 2679218
if the content on your page is the image, and only the image, the usual hack is:

<table width="100%" height="100%">
<tr><td align="center"><img src="mypicture.gif" ... ></td></tr>
</table>

the vertical alignment of the cell defaults to "middle" so it's centered vertically.  with width & height set to 100% the table will consume the whole page regardless of browser window size, and you'll get the effect you want.

the suggestion of using absolute positioning is useless since it doesn't take into account the possible variations in browser window size.
0
 
LVL 5

Expert Comment

by:tzarad
ID: 2679272

When i said testing the client screen resolution, i mean the browser resolution.
With this, you set the top and left values for absolute positioning.

You have to use the following:
<body onload="YourScript()" onresize="YourScript()">

If your page contains only one picture, the table solution is all you need, but if it's not the case, you have to use scripting and absolute positioning.

browser window width :
document.body.offsetWidth
browser windows height :
document.body.offsetHeight


0
 
LVL 5

Expert Comment

by:Christian_Wenz
ID: 2679286
document.body is imho IE-specific
0
 
LVL 5

Expert Comment

by:tzarad
ID: 2679295

browser window width :
IE = document.body.offsetWidth
NS = window.innerWidth

browser windows height :
IE = document.body.offsetHeight
NS = window.innerHeight
0
 
LVL 7

Expert Comment

by:nettrom
ID: 2679321
oh, I didn't spot the JavaScript comment before I went back and re-read your comment tzarad.  sorry that I labeled your solution useless, since it then isn't.
0
 
LVL 1

Author Comment

by:Hocam
ID: 2679681
I know how to center an image both horizontally and vertically within a table...!

People, I would like to center the image, table, text, whatever,  "within" the whole browser area. Some of you has given useful information, I am experimenting on those to get something working.

Once I get it working, somebody will earn the glory and the points (not much but...!)

Thanks...
-Hocam
0
 
LVL 5

Expert Comment

by:Christian_Wenz
ID: 2679699
if you want to center everything, you have to put the table with one cell that has VALIGN="middle" around all of your code (within <BODY>).
0
 
LVL 1

Author Comment

by:Hocam
ID: 2679710
Hey, I got it!!!!
This is the page URL:
http://www.jubilee-tech.com/arsmfg

I created a table with 100% for width and height, and created another table within that table and centered vertically and horizontally.

No matter what the resoulution or the browser size is, my inner table will always be centered.

Thanks...
(I will give points to tzarad for his comments. Thx...)

-Hocam
0
 
LVL 5

Expert Comment

by:Christian_Wenz
ID: 2679895
eer- I don't want to nag, but is this solution not according to nettrom's and m comments?!
0
 
LVL 7

Expert Comment

by:nettrom
ID: 2679933
I don't mean to nag either, and I'm not going to make a huge discussion out of a few points, but Hocam's discovery of the "solution" is totally related to Christian's and my comments.

with a table where height & width is 100%, and it only contains 1 table cell, and that cell has alignment set to "center" any content in that table cell, regardless of type, will be centered both vertically and horisontally in the document.

but as I said, I'm not going to make a huge discussion out of it, I'm only make a (small) point.  time to move on to other questions.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question