?
Solved

Centering items (horizontally and vertically) on a page?

Posted on 2003-03-12
6
Medium Priority
?
315 Views
Last Modified: 2010-04-09
Hi I've got a multi-layered, table object which I intend to use as a fancy entrance page to my site.
My problem is that I can't seem to get the items all centered in the middle of the screen.  I'm using DreamWeaver to generate the page, and it works, but only for my own monitor resolution.  It's off center if I look at it at another resolution.  I tried modifying the DreamWeaver generated html, but it doesn't seem to work.

Does anybody have any suggestions?
I'd appreciate any insights you could bring.
Thanks!
0
Comment
Question by:jphchan
[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
6 Comments
 

Expert Comment

by:Bardicstorm
ID: 8125143
If you are already using nested tables (which will slow down your page) you can try the following:

Set your content table inside an "outer" table which is set to a height and width of 100% (see code example). Make sure to 'valign="middle"' the "outer" table row (as in example), then set your content table to 'align="center"'.

Hopefully the code below should make this clearer. However, positioning your content with css, while possibly more work, would be better overall. I hope this code helps.

<!-- ## CODE ## -->

<html>
<!-- header tags removed -->
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">


<!-- "Outer" Table for positioning -->
<!-- note that height="100%" does not work with all browsers -->
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

<tr valign="middle">  <!-- note the valign="middle"-->
<td>

     <!-- Main content table, note the align="center" attribute -->
     <!-- table shaded for visual reference -->
     <table width="600" bgcolor="#AAAAAA" align="center">
     
     <tr><td align="center">This text should be centered</td></tr>
     
     </table>
     
</td></tr>

</table>

</body>
</html>
0
 
LVL 5

Expert Comment

by:kasandra
ID: 8125167
Do you have a url we can have a look at?

There probably isn't much point to us suggesting code to center without seeing what you are actually using.
0
 
LVL 1

Accepted Solution

by:
bnkrazy earned 200 total points
ID: 8129592
there is a neat css hack to center vertically, works every time for me.
here is the url:

http://www.wpdfd.com/editorial/wpd0103.htm#toptip

chris
0
Independent Software Vendors: 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 1

Expert Comment

by:bnkrazy
ID: 8140865
have you got it working yet?
0
 

Author Comment

by:jphchan
ID: 8160796
Thanks a lot!  This was very helpful, and almost precisely what I needed.
0
 
LVL 1

Expert Comment

by:bnkrazy
ID: 8162346
Thanks! Glad it worked.
0

Featured Post

WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

Question has a verified solution.

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

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.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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 style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

771 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