Log in

View Full Version : Getting a Div to center


kittenesque
08-18-2006, 10:05 AM
I am using the following code to try and make a centered section. I cant work out what to use to make the div section in the middle of the page (vertially)

Any suggestions?


<html>
<head>
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html;">
<style type="text/css">


body {
background:#FFFF00;

}

#main {
border:1px solid #000;
background:#fff;
padding: 1px 1px 1px 1px;
}

h1 {
font-size:14px;
padding-top: 5px;
}

</style>

</head>
<body>

<div id="main">

Text here!
</div>

</body>
</html>
boogyman
08-18-2006, 02:23 PM
<style type="text/css">
<!--
body {
background:#FFFF00;
margin: 0 auto;
width: 80%;
text-align: left;
}
//-->
</style>


Where width: 80% is equal to the width .... you can use % or px or em .... the margin property is what will center the whole page and text-align will ensure that all of your text is justified normally
mwinter
08-18-2006, 06:41 PM
<!--

"Hiding" script or style sheet content hasn't been necessary for many years.



body {
background:#FFFF00;

Specifying either a foreground or background colour but not the other can lead to colour clashes. Not everyone will have the same default colours as the author. If you start specifying colours for one thing (foreground text, background colours or images, or link text), do the rest as well.



Where width: 80% is equal to the width .... you can use % or px or em

Though pixel lengths should often be avoided except in relation to images or other content of fixed size (which doesn't include text).

Don't use pixels to define font sizes: only use percentages. The reasons can be found in the archives of these forums, as well as other places on the Web.



... text-align will ensure that all of your text is justified normally

Why wouldn't it be? There are no other conflicting declarations. Perhaps you are confused by the MSIE workaround whereby the text-align property is applied to a parent element with value of center (which hasn't been used here)?

Mike
blm126
08-18-2006, 07:35 PM
<style type="text/css">
<!--
body {
background:#FFFF00;
margin: 0 auto;
width: 80%;
text-align: left;
}
//-->
</style>


Where width: 80% is equal to the width .... you can use % or px or em .... the margin property is what will center the whole page and text-align will ensure that all of your text is justified normally
The OP wants to center the div vertically.
shachi
08-19-2006, 04:11 PM
Try this http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm