PDA

View Full Version : Centring a block of text vertically


Dean Robieson
09-25-2011, 10:13 PM
Hi Experts.

I have created a template for a site that has a column down the right side of the page for content. Some would refer to it as a 'sidebar'.

My problem is that I need to use the template for numerous pages and of course, the content will change from page to page. What we want though is for the content to align top-to-bottom within the column, rather than have the content 'spread down' the column from the top.

This site is CSS based, not table based.

The only way I have found that kind-of fixes the problem is to insert a pair of div-tags at the top of the column, and vary the height property of that div to 'push' the text down.

This method is quite 'trial and error', and the result varies from browser to browser (if only be a small amount).

Is there a better way ?

Thanks.

Dean

edbr
09-26-2011, 07:51 AM
this might do what you want

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<style type="text/css">

#container{ position:relative; width:500px; height:500px;}
.centre{ background-color:#666; width:100px; height:100px; margin:50% auto 50% auto; position:relative;}

</style>
</head>
<body>
<div id="container">
<div class="centre">centre div </div>
</div>


</body>
</html>

Dean Robieson
09-27-2011, 07:54 PM
Thanks Edbr - your code works a treat !

One further question should you happen to revisit this thread...

In your #container, you have a position:relitave.

I have tested across 5 browsers with and without that code, and it would seem to not make any difference... could you please explain it's use ?

Thanks again.

Dean

edbr
09-28-2011, 01:02 AM
because i was assuming the container was to be in the document flow. does it cause the design to break? if not doubt its doing any harm

Dean Robieson
09-28-2011, 01:37 AM
Fantastic - Thanks again.

Dean