?
Solved

Centering tables vertically...

Posted on 2000-04-02
13
Medium Priority
?
484 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Suggested Courses

762 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