Centering tables vertically...

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


LVL 1
HocamAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
tzaradConnect With a Mentor Commented:
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
 
RainCommented:
<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
 
Christian_WenzCommented:
this should work:
<TABLE HEIGHT="100%">
<TR><TD VALIGN="MIDDLE">
<IMG SRC="...">
</TD></TR>
</TABLE>
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
nettromCommented:
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
 
tzaradCommented:

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
 
Christian_WenzCommented:
document.body is imho IE-specific
0
 
tzaradCommented:

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

browser windows height :
IE = document.body.offsetHeight
NS = window.innerHeight
0
 
nettromCommented:
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
 
HocamAuthor Commented:
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
 
Christian_WenzCommented:
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
 
HocamAuthor Commented:
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
 
Christian_WenzCommented:
eer- I don't want to nag, but is this solution not according to nettrom's and m comments?!
0
 
nettromCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.