PDA

View Full Version : Centering Vertically my Div


Chapo
04-14-2009, 04:27 AM
I just can't center my Div in the CSS for top and bottom, i use the auto just like i do for the left and right margins and works great, but not verticaly for top and bottom. Why could go wrong ?

I don't have a link since it never works i just adjust the top positioning.

edbr
04-14-2009, 05:05 AM
centre of what?

Corrosive
04-14-2009, 07:29 AM
centre of what?

I think Chapo means using margin-top: auto; and margin-bottom: auto; to have the same effect height wise as left and right auto does width wise. I.e. totally centred. I tried this before, like Chapo I never got it to work. I am interested if there is a solution!

edbr
04-14-2009, 08:26 AM
try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container {
border: 1px solid #666;
position: relative;
height: 100%;
width: 100%;
}
#centre {
background-color: #CCC;
float: left;
height: 60%;
width: 60%;
border: 1px solid #999;
margin-left:20%;
margin-right:20%; margin-top: 20%; margin-bottom: 20%;
}
-->
</style></head>

<body>

<div id="container">
<div id="centre"></div>

</div>
</body>
</html>

Corrosive
04-14-2009, 08:29 AM
try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container {
border: 1px solid #666;
position: relative;
height: 100%;
width: 100%;
}
#centre {
background-color: #CCC;
float: left;
height: 60%;
width: 60%;
border: 1px solid #999;
margin-left:20%;
margin-right:20%; margin-top: 20%; margin-bottom: 20%;
}
-->
</style></head>

<body>

<div id="container">
<div id="centre"></div>

</div>
</body>
</html>

Looks good Ed. I'll try that later :)

edbr
04-14-2009, 08:56 AM
i didnt test that , this looks better with an absolute dimensions to the container
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container {
border: 1px solid #666;
position: relative;
height: 600px;
width:600px;
}
#centre {
background-color: #CCC; position:relative;
float: left;
height: 60%;
width: 60%;
border: 1px solid #999;
margin-left:20%;
margin-right:20%; margin-top: 20%; margin-bottom: 20%;
}
-->
</style></head>

<body>

<div id="container">
<div id="centre">gffsdfgsdsd
sdgsdgsdggsd
sdgsdgsdgsdgsdg</div>

</div>
</body>
</html>

Chapo
04-14-2009, 01:45 PM
Corrosive, that code works fine.... but its weird that it doesn't work the top auto and bottom auto.... i don't know the reason why is there then.