What's new
The Front Row Forums

Register a free account today to become a member of the world's largest Rugby League discussion forum! Once signed in, you'll be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

Centering web page content for different resolutions

TiTTieS_[CNTDN]

Juniors
Messages
2,470
Just wondering how you would go about having a small amount of content on a single web page appear in the very middle (horizontal and vertical) no matter what setting the end user is using e.g. 600x800 or 768x1024.

Is it possible (and easy) to do it using divs?
 

TooheysNew

Coach
Messages
1,051
Try this:

Code:
<html>
   <head>
      <style type="text/css">
         html, body   { background-color: red; height: 100%; margin: 0; padding: 0;
                        color: white; text-align: center; }
         div#centered { border: 0; background-color: white; height: 50%; width: 50%;
                        position: absolute; left: 25%; top: 25%; color: black; }
      </style>
   </head>
   <body>
      <div id="centered">
         Vertically centered div
      </div>
   </body>
</html>
 

TiTTieS_[CNTDN]

Juniors
Messages
2,470
Cheers Dilmah. I have since found a slightly different way, but I'll give your go a burl :D I am hoping that it works better than the way I have just finished on.
 

TiTTieS_[CNTDN]

Juniors
Messages
2,470
Actually, it is the same coding source as far as I can see, but I have worked it into a CSS remotely linked file. Should that make any difference?

The thing is that it looks pretty good in 1280 by 1024 on a 17 inch screen and also works fine in 768 by 1024 but not as crisp looking. But when I stick it into 600 by 800, it needs scroll bars (both ways). Could that simply be due to me using a 17 inch screen? I guess what I am asking is would it fit on the screen without scrollbars on a 15 inch monitor set at 600 by 800? Or does the physical size of the monitor not influence the resolution settings?
 
Top