Vertical and Horizontal Centering

Forum Moderators: open

Message Too Old, No Replies

Vertical and Horizontal Centering

Quick Question?

andmunn

5:50 am on Jan 20, 2005 (gmt 0)

I'm guessing this is something simple, but lets assume i have a piece of text "The Widget Site", and i want to align it both horizontally and vertically to be centered in the window regardless of the users resolution.

How would i code this?

Thanks :)

BonRouge

6:11 am on Jan 20, 2005 (gmt 0)

Like this :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vertically and horizontally centred</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html {
height:100%;
margin:0;
padding:0;
}
#main {
width:400px; 
height:400px; 
position:relative; 
margin-left:-200px;
left:50%;
margin-top:-200px;
top:50%;
border:1px solid red;
}
</style>
</head>
<body>
<div id="main">
Content goes here
</div>
</body>
</html>

MichaelBluejay

8:27 am on Jan 21, 2005 (gmt 0)

Here's a way with less code. CSS purists and validation purists will hate it, but it works for me:

<TABLE border=0 width=100% height=100%><TR><TD align=center valign=middle>
  Boo boo puppy
</TD></TR></TABLE>

firstreflex

3:47 pm on Jan 21, 2005 (gmt 0)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vertically and horizontally centred</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin:0;
}
#center {
position:absolute;
top:5px; /* for IE-mac */
left:0;
}
/* Hide from IE-mac \*/
#center {
top:50%;
width:100%;
margin-top:-200px;
text-align:center;
min-width:400px; 
}
/* End hide from IE-mac */ 
#main {
width:400px;
height:400px;
margin:0 auto;
text-align:left;
border:1px solid red;
}
</style>
</head>
<body>
<div id="center">
<div id="main">
Content goes here
</div>
</div>
</body>
</html>

MichaelBluejay

11:24 am on Jan 26, 2005 (gmt 0)

I prefer the way with 90% less code. I'm just crazy that way I guess.

Solarus

11:22 pm on Jan 26, 2005 (gmt 0)

Or you could do this with frames :)

index.html
��
<html>
<head>
<title>errrR!1</title>
</head>

<frameset rows="*,480,*" border="0" frameborder="no">

<frame src="blank.html" noresize scrolling="no">
</frameset>
<frame src="blank.html" noresize scrolling="no">
</frameset>
</html>
��

.
.
.

blank.html
��
<html>
<head>
<title></title>
</head>
<body bgcolor="#202020">
</body>
</html>
��