center text on screen?

skanky · 9 Jul 2007 at 00:26

i'm rather new to websites and wanted to make a simple page with a small bit of text in the middle of the page that is centered both horizontally and vertically.

eg, the word "test" will appear in the middle regardless of if its viewed on a 640x480 fullscreen, a 1920x1200 fullscreen or a 1024x768 in a window etc.

thinking about it, would it be possible to have say a page in which the text scales to whatever size the browser window is set to, so the text will always take up the same amount of space on the page, dependant on browser size?

any idea how to do this or if its even possible?

Jaffa_Cake · 9 Jul 2007 at 01:51

Code:

<div style="left:50%;top:50%;position:absolute">Test</div>

should work.

Although it is a little messy but its 1 line

skanky · 9 Jul 2007 at 07:37

that seems to have done it for just "test" but how would i do it if i have say 2 lines of text, if i do what you've suggested along with <center></center> it all goes wrong when i try and stretch to widescreen resolutions.

is there a way to have a "right hand side margin" as well as the left/top ones?

Jaffa_Cake · 9 Jul 2007 at 13:38

Take a look at this thread http://forums.overclockers.co.uk/showthread.php?t=17752040

My CSS isn't good

furnace · 9 Jul 2007 at 14:02

Code:

<html>
<head>
<title></title>
<style type="text/css">
<!--
.midBox {
	width: 80px;
	height: 80px;
	top: 50%;
	left: 50%;
	position: absolute;
	margin-top: -40px;
	margin-left: -40px;
	border: 1px solid #000000;
}
-->
</style>
</head>

<body>
<div class="midBox">
	This is the middle box
</div>
</body>
</html>

Something like that... But you'll have to resize the box depending on the text that's in it.

skanky · 9 Jul 2007 at 16:43

furnace said:
Something like that... But you'll have to resize the box depending on the text that's in it.

that did what i'm after, thanks!