Best way of Vertical centering a div?

Cushioned · 25-10-2008, 09:19 PM

Use this, like said earlier.

Code:

#div {
        margin: auto;
       }

Iszak · 25-10-2008, 09:29 PM

Because it doesn't work, try it yourself it only works for horizontal.

Code:

<!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

Code:

<!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

Originally Posted by Favourtism

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.

Jxhn · 26-10-2008, 07:32 AM

Originally Posted by craigg.

use margin: auto; on the container div or even in the body tag.

Originally Posted by Cushioned

Use this, like said earlier.

Code:

#div {
        margin: auto;
       }

That had already been said twice, so pointless posts.

Originally Posted by Calon

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?"

~~Moh~~ · 26-10-2008, 11:46 AM

Originally Posted by Iszak

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.

Code:

<!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

Anyways, +rep to everyone who helped

~~Calon~~ · 27-10-2008, 05:39 AM

Originally Posted by Jxhn

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.

Code:

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..)

Jxhn · 28-10-2008, 08:09 AM

Originally Posted by Calon

Yes I did.

Code:

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?

Thread: Best way of Vertical centering a div?

Thread Tools

Posting Permissions