Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Centering tables vertically...

Posted on 2000-04-02
13
Medium Priority
?
491 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 26 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Find out what you should include to make the best professional email signature for your organization.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
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…
Suggested Courses

578 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