Solved

Centering tables vertically...

Posted on 2000-04-02
13
451 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
Comment Utility
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
Comment Utility
<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
Comment Utility
this should work:
<TABLE HEIGHT="100%">
<TR><TD VALIGN="MIDDLE">
<IMG SRC="...">
</TD></TR>
</TABLE>
0
 
LVL 7

Expert Comment

by:nettrom
Comment Utility
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
Comment Utility

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
Comment Utility
document.body is imho IE-specific
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 5

Expert Comment

by:tzarad
Comment Utility

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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
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.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

772 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now