Aligning text in a dhtml <div> tag

[Kiegs219]

Hello,
Does anyone know how to align text in a <div> tag so that it will be in the center of the box like this (+ stands for blank space):

+++++++++++++++++++
+++++++++++++++++++
+++++++++++++++++++
++++Text goes here++++
+++++++++++++++++++
+++++++++++++++++++
+++++++++++++++++++

I have a table and when the width and height of the cell are bigger than the width and size of the <div> inside, the table centers the first line of the <div>. Now I'm trying to make the <div> as big as the cell and then center the data inside. Does anyone know how to do it, or if there is a better way?

Thank you for your time,

Daniel Kigelman

Not too sure what you mean...

but div tags are like this:

<div algin="center" valign="center">

and you can just set the whole cell to be centered...

<table>
<tr>
<td align="center" valign="center">
stuff here
</td>
</tr>
</table>

valign = Verticle Align, BTW...

[Kiegs219]

It doesn't work... This is my code:

<td width="70%" bgcolor="#ffe7c6"><!--Main Window-->

<div id="box" style="position: absolute; background-color: #ffe7c6; visibility: hidden; width: 100%; height: 200;" valign="center">
"About 5 lines of text here"
</div>

<div id="box" style="position: absolute; background-color: #ffe7c6; visibility: hidden; width: 100%; height: 200;" valign="center">
This is the downloads page
</div>

<div id="box" style="position: absolute; background-color: #ffe7c6; visibility: hidden; width: 100%; height: 200;" valign="center">
This is the links page
</div>

<div id="box" style="position: absolute; background-color: #ffe7c6; visibility: hidden; width: 100%; height: 200;" valign="center">
e-mail me!
</div>
</td>

What am I doing wrong?

[dangerousdave]

OK, look at your code at the top...
<td align="center" ..... >

Centre the TD.

[Kiegs219]

I did include the code valign="center" I just didn't write it when i was posting the message. The problem is that when you do valign="center" that it aligns the first line of the <div> with the middle of the cell, and everything within the <div> is therefore below the center. I also tried putting <div valign="center"> but it didn't work. I haven't tested it outside of the table cell though.

[dangerousdave]

Ah. I think now I see what you are doing.

You need the DIV to be the same size as the TD. Then, unfortunately what you do is create a new table within the DIV and make a row within that and set it's valign property to be "center"
So it goes somet like:

<TD>
<DIV>
<TABLE>
<TR valign="center">
<TD>
<P>STUFFFFFFF!</P>
</TD>
</TR>
</TABLE>
</DIV>
</TD>

Hmm, hope that helps a bit better.

[Kiegs219]

Thanks!!! That really helps a lot! I got desperate earlier and even wrote a little function that tries to figure it out. This makes it a lot simpler. Well, thanks again,

Daniel Kigelman

[Kiegs219]

One more question, is it supposed to work in Netscape?

[rod]

suppose i have a bunch of tables inside the DIV tag...
can i center this inside the DIV?

thanks

[Kiegs219]

Why can't both the browsers be alike??!!
There is either a problem with my code, or else it's netscape. If you do 'position:absolute;' for a <div> then it goes to left=0 and top=0, and it doesn't stay in the table cell. If you do 'position:relative;' and you have more than one <div> then you are going to have a really tall cell because the <div>s don't stay in the same area, but build up, destroying the rollover effect that I'm trying to make. Is there a way to fix this or should I give up on it?

[dangerousdave]

This should work:

Put a 'master' relatively positioned div within your table and then put more divs within that that are positioned absolutely.
i.e.

<table align="center" border=3>
<tr>
<td>

<div style="position: relative"
<div style="position: absolute; left: 100; top: 50">
<p>Stuff here</p>
</div>
</div>

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


However, if the div exceeds the width or height of the table, the table border will not stretch to fit.

That should help.