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

x
?
Solved

Centering items (horizontally and vertically) on a page?

Posted on 2003-03-12
6
Medium Priority
?
322 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
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
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 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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
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