How do I make the <div class="mid"> block align to the middle of the page?
<html>
<head>
<title>The Griffin Inn CC</title>
<style type="text/css">
body {
background:#bca;
text-align:center;
font:small/1.5em "Trebuchet MS",Verdana,Arial,Sans-serif;
color:#333;
}
div.mid {
position: relative;
width: 100%;
height: 100%;
vertical-align: middle;
text-align: center;
}
A:link {text-decoration: none; color: grey;}
A:visited {text-decoration: none; color: grey;}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: orange;}
</style>
</head>
<body>
<div class="mid">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"22may.html">Newick</a><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"12june.html">Bodle Street</a><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"25june.html">West Hoathly</a><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"10july.html">Gentlemen Of Sussex</a>
</div>
</body>
</html>
Many thanksCss most unusuable declaration. Obviously you need to calculate the precentage of up and down so you will have it in the middle... just typing margin-top:50% and margin-down:50% won纾
<html>
<head>
<title>The Griffin Inn CC</title>
<style type="text/css">
body {
background:#bca;
text-align:center;
font:small/1.5em "Trebuchet MS",Verdana,Arial,Sans-serif;
color:#333;
}
div.mid {
position: relative;
width: 100%;
height: 100%;
vertical-align: middle;
text-align: center;
}
A:link {text-decoration: none; color: grey;}
A:visited {text-decoration: none; color: grey;}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: orange;}
</style>
</head>
<body>
<div class="mid">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"22may.html">Newick</a><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"12june.html">Bodle Street</a><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"25june.html">West Hoathly</a><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"10july.html">Gentlemen Of Sussex</a>
</div>
</body>
</html>
Many thanksCss most unusuable declaration. Obviously you need to calculate the precentage of up and down so you will have it in the middle... just typing margin-top:50% and margin-down:50% won纾