View Full Version : Best way of Vertical centering a div?
What's the best way to vertical center a div?
+rep :)
Heroix
25-10-2008, 01:01 PM
I am learning to code, but could you do in the css. margin-top: 25%; or 50% or something. LOL im probs wrong !
I've heard people say:
margin: auto;
but I've not tryed that yet. I know this works:
position: absolute;
top: 50%;
margin top: -[half div's height]px;
CSS obviously.
I've heard people say:
margin: auto;but I've not tryed that yet. I know this works:
position: absolute;
top: 50%;
margin top: -[half div's height]px;CSS obviously.
What if the height is expandable - sorry, forgot to state that.
Favourtism
25-10-2008, 02:22 PM
When I asked before for alligning divs in a skin I got told to use
v-align: center;
What if the height is expandable - sorry, forgot to state that.
Then try the margin: auto; thing. If that doesn't work then you might need javascript to find the height of the element. I'm pretty sure It must be possible without javascript though.
When I asked before for alligning divs in a skin I got told to use
v-align: center;
Thats an old html tag and can be done with css. I think you meant valign="middle". When I was looking for information about that I found a possible solution for Jack's problem.
div.blah
{
vertical-align: middle;
}
craigg.
25-10-2008, 02:55 PM
use margin: auto; on the container div or even in the body tag.
Jackboy
25-10-2008, 07:24 PM
i swear theres vertical-align: in css
HabbDance
25-10-2008, 08:31 PM
i think they are right.
#div {
margin: auto;
should work.
but, you can try this:
<div style="background-image: url( '<your-full-image>.png' ); background-position: 50% center; background-repeat: no-repeat; width: <your-images-width>px; height: <your-images-width>px; position: absolute; top: 50%; left: 50%; margin-left: -( <your-images-width> / 2 )px; margin-top: -( <your-images-height> / 2 )px;"></div>
Iszak
25-10-2008, 09:00 PM
Jxhn is right to an extent in using vertical align, but for it to work you must set the parent/containing div to be display: table-cell; here is an example.
<!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>
<style type="text/css">
#container
{
width: 500px;
height: 500px;
display: table-cell;
vertical-align: middle;
background-color: #333;
}
#middle
{
width: 500px;
background-color: #999;
}
</style>
</head>
<body>
<div id="container">
<div id="middle">
Expands yay :)<br />
<br />
<br />
<br />
and yet still centered :P:
</div>
</div>
</body>
</html>
Now if you want something centered vertically in the body now that's a different story.
I might also add on Jxhn first post about the position: absolute; left: 50%; margin-left: -(width/2)px of course you don't do it like that you do the calculations this has one slight problem - you've got to set the parent to position: relative; otherwise it'll fail.
Cushioned
25-10-2008, 09:19 PM
Use this, like said earlier.
#div {
margin: auto;
}
Iszak
25-10-2008, 09:29 PM
Because it doesn't work, try it yourself it only works for horizontal.
<!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>
<style type="text/css">
#middle
{
width: 200px;
margin: auto;
background-color: #333;
}
</style>
</head>
<body>
<div id="container">
<div id="middle">
Expands yay :)<br />
<br />
<br />
<br />
and yet not centered vertically :(
</div>
</div>
</body>
</html>
even with a fixed 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>
<style type="text/css">
#container
{
width: 600px;
height: 600px;
background-color: #999;
}
#middle
{
width: 200px;
margin: auto;
background-color: #333;
}
</style>
</head>
<body>
<div id="container">
<div id="middle">
Expands yay :)<br />
<br />
<br />
<br />
and yet not centered vertically :(
</div>
</div>
</body>
</html>
thus proving it does not WORK! for vertical aligning.
Calon
25-10-2008, 09:39 PM
When I asked before for alligning divs in a skin I got told to use
v-align: center;
Sorry, but what's with your signature,
$variable_function();
You can't do that, lol.
On topic:
<center> and </center>
but it's not valid xhtml.
use margin: auto; on the container div or even in the body tag.
Use this, like said earlier.
#div {
margin: auto;
}
That had already been said twice, so pointless posts.
On topic:
<center> and </center>
but it's not valid xhtml.
You didn't even read the topic.
"Best way of Vertical centering a div?"
Jxhn is right to an extent in using vertical align, but for it to work you must set the parent/containing div to be display: table-cell; here is an example.
<!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>
<style type="text/css">
#container
{
width: 500px;
height: 500px;
display: table-cell;
vertical-align: middle;
background-color: #333;
}
#middle
{
width: 500px;
background-color: #999;
}
</style>
</head>
<body>
<div id="container">
<div id="middle">
Expands yay :)<br />
<br />
<br />
<br />
and yet still centered :P:
</div>
</div>
</body>
</html>
Now if you want something centered vertically in the body now that's a different story.
I might also add on Jxhn first post about the position: absolute; left: 50%; margin-left: -(width/2)px of course you don't do it like that you do the calculations this has one slight problem - you've got to set the parent to position: relative; otherwise it'll fail.
That worked the best :)
I had to change the container to display:table and the middle to display:table-cell because there were 3 containers next to each other acting like cells :P
Anyways, +rep to everyone who helped :)
Calon
27-10-2008, 05:39 AM
That had already been said twice, so pointless posts.
You didn't even read the topic.
"Best way of Vertical centering a div?"
Yes I did.
v-align: top;
v-align: bottom;
is how v-align I thought was used and I thought that he just wanted it centered, excuse my mistake.
-REP (Need to spread, won't forget..)
Yes I did.
v-align: top;
v-align: bottom;
is how v-align I thought was used and I thought that he just wanted it centered, excuse my mistake.
-REP (Need to spread, won't forget..)
You only said center? He said vertical alignment. You can't -rep me because you misread his post. I don't even understand the second sentence, could you rephrase it please?
Want to hide these adverts? Register an account for free!
Powered by vBulletin® Version 4.2.5 Copyright © 2025 vBulletin Solutions Inc. All rights reserved.