Vertically Centering Contents of DIV Layer?

[Shannon]

How can I vertically center the contents of a DIV layer? I can't use valign=center because that attribute doesn't apply to layers.

 

[SandStorm]

Damn. Talk about hard questions, mate. Can you go "divlayer1 = center", or whatever coding applies in that sort of situation?

 

[Shannon]

Originally posted by SandStorm
Damn. Talk about hard questions, mate. Can you go "divlayer1 = center", or whatever coding applies in that sort of situation?

Nope.

 

[SandStorm]

I'm lost then. Perhaps one of those smarty-pants Modsters, ie Giles, Der Alta etc can help you.

 

[LoudMusic]

The way I've virtically aligned in the past is to put things into a table ...

<table height="100%">
<tr>
<td valign="center">

HELLO!

</td>
</tr>
</table>

I don't know if that will work with the rest of your layout, but that's one way of getting an item centered.

 

[Sage]

LM - But I think he's trying to do a table-free design.

Anyway, Shannon, I'll give you two answers, because I'm not sure exactly what you're asking...

If you mean that you have a division that's less than 100% in width (say, 500px), and you want to center the entire division, you can do so by adding this to the division/its class:

     margin-left: auto;
     margin-right: auto;

Now, when you do this, it's important that you add the following to your body style:

     height: 100%;
     width: 100%;

You have to do this so that the browser can calculate the margins of the division, because its width is inherited from the body... if you don't put the 100% specs into the body, some browsers will left-align the division no matter what.

Now, if you want to just center-align say text or an image within a division (no matter how the division is aligned), that's super-easily accomplished with adding the following to the division:

    text-align: center;

 

[Shannon]

Originally posted by Sage
LM - But I think he's trying to do a table-free design.

Well, sort of. I managed to dig up a bit of CSS code to center a layer both horizantlly and vertically on the page.

Anyway, Shannon, I'll give you two answers, because I'm not sure exactly what you're asking...

If you mean that you have a division that's less than 100% in width (say, 500px), and you want to center the entire division, you can do so by adding this to the division/its class:

     margin-left: auto;
     margin-right: auto;

Now, when you do this, it's important that you add the following to your body style:

     height: 100%;
     width: 100%;

You have to do this so that the browser can calculate the margins of the division, because its width is inherited from the body... if you don't put the 100% specs into the body, some browsers will left-align the division no matter what.

Now, if you want to just center-align say text or an image within a division (no matter how the division is aligned), that's super-easily accomplished with adding the following to the division:

    text-align: center;

None of that really helps me. I already have the layer centered, I just want the contents of that layer to be both horizontally and vertically centered. I've tried both text-align: center; and vertical-align: middle; and it's not working.

I'll attach the html file (I'm using style tags at the moment, so you don't have to worry about external style sheets).

 

[Shannon]

Well, I can do it by putting a table inside the layer like so:

[color=blue]<div class="center">[/color]
[color=green]<table width="770" height="400" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="middle" class="text">[/color]Centered text.[color=green]</td>
  </tr>
</table>[/color]
[color=blue]</div>[/color]

However, I am then presented with another problem. According to W3C, for a valid XHTML 1.0 Transitional page, you can't use the height tag for a table. Removing the height tag makes the text go to the top of the layer and brings me back to my original question.

Stupid web standards.

 

[Sage]

Try setting the centered division to the text-align and vertical-align properties, then also adding in the 100% height/width properties that I mentioned earlier (I'm just going by the index.html that you provided, which doesn't show any properties for the body other than its color). Like I said, browsers often need those 100% specifications to calculate everything. I'm not guaranteeing it'll work though.

If worse comes to worst, you'll probably have to make the division an absolutely fixed size, then add a certain amount of padding to the text to somewhat center it (though of course, it would then vary with each individual page, which could be a mess depending on how many webpages you have/plan on making).

 

[Shannon]

Originally posted by Sage
Try setting the centered division to the text-align and vertical-align properties, then also adding in the 100% height/width properties that I mentioned earlier (I'm just going by the index.html that you provided, which doesn't show any properties for the body other than its color). Like I said, browsers often need those 100% specifications to calculate everything. I'm not guaranteeing it'll work though.

If worse comes to worst, you'll probably have to make the division an absolutely fixed size, then add a certain amount of padding to the text to somewhat center it (though of course, it would then vary with each individual page, which could be a mess depending on how many webpages you have/plan on making).

I think I've solved the problem by using CSS to determine the width and height of the table.

.blah }
     width: 770px;
     height: 400px;
}

Then adding that class to the table makes it 770x400.

 

[Sage]

Yeah, that'll do the trick. I'm assuming though that you've given up on the prospect of not using tables for your site layout? (I mean, it is W3C compliant, but theoretically there should be enough support to layout an entire website through CSS only, though as I've found out recently, IE6 is one little ****head when it comes to CSS 2 support ).

 

[Shannon]

Originally posted by Sage
Yeah, that'll do the trick. I'm assuming though that you've given up on the prospect of not using tables for your site layout? (I mean, it is W3C compliant, but theoretically there should be enough support to layout an entire website through CSS only, though as I've found out recently, IE6 is one little ****head when it comes to CSS 2 support ).

Well, I will scrap the table if I can find someway of vertically centering the contents of the layer, instead of putting a table in and using valign.

 

[Sage]

I just thought of something: You know how I mentioned using the margin-left/right: 100% thingie to center-align divisions? Well, I forgot to mention that you can also add this to p (paragraph), so that all of your paragraphs are center-aligned within a division. With that in mind, it might be worth a shot to add margin-top/bottom: 100% to your p selectors (or assign them a class if you want), and see if that'll vertical align them. Just make sure, as always, to add 100% to the width/height of the body.

 

[Shannon]

Originally posted by Sage
I just thought of something: You know how I mentioned using the margin-left/right: 100% thingie to center-align divisions? Well, I forgot to mention that you can also add this to p (paragraph), so that all of your paragraphs are center-aligned within a division. With that in mind, it might be worth a shot to add margin-top/bottom: 100% to your p selectors (or assign them a class if you want), and see if that'll vertical align them. Just make sure, as always, to add 100% to the width/height of the body.

So it'd be:?

<p style="margin-left:100%; margin-right:100%">....</p>

 

[Sage]

Try this...

body
      {
      height:100%;
      width:100%;
      background-color:#f8f8f8;
      text-align: center;
      }

div.center
      {
      width:770px;
      height:400px;
      margin-top:100%;
      margin-right:100%;
      margin-bottom:100%;
      margin-left:100%;
      background-color:#FFFFFF;
      border:1px solid #333333;
      }

p
      {
      margin-top:100%;
      margin-right:100%;
      margin-bottom:100%;
      margin-left:100%;
      }

There has to be some way for it to work... if the stuff above doesn't, I'll find some way. Anyway, bed time for me!

 

[Shannon]

Originally posted by Sage
Try this...

body
      {
      height:100%;
      width:100%;
      background-color:#f8f8f8;
      text-align: center;
      }

div.center
      {
      width:770px;
      height:400px;
      margin-top:100%;
      margin-right:100%;
      margin-bottom:100%;
      margin-left:100%;
      background-color:#FFFFFF;
      border:1px solid #333333;
      }

p
      {
      margin-top:100%;
      margin-right:100%;
      margin-bottom:100%;
      margin-left:100%;
      }

There has to be some way for it to work... if the stuff above doesn't, I'll find some way. Anyway, bed time for me!

Okay. I'll try it out. Thanks for all the help so far.

 

[KosmikFool]

I didn't read through all the code but did you try CSS cells? Might add a bit of code but could still help a bit.

 

[Sage]

Originally posted by Shannon
Okay. I'll try it out. Thanks for all the help so far.

You're welcome.

However, I just realized something... I think settings all of those margin properties to 100% will push the content off the page. Try setting all of the margin properties to "auto" instead (but still keeping the body's height/width at 100%). I'd actually go and test this out myself, but I'm a bit tight time-wise today.

 

[Shannon]

Originally posted by Sage
You're welcome.

However, I just realized something... I think settings all of those margin properties to 100% will push the content off the page. Try setting all of the margin properties to "auto" instead (but still keeping the body's height/width at 100%). I'd actually go and test this out myself, but I'm a bit tight time-wise today.

Yeah. I end up with horizontal and vertical scrollbars a mile long.