How to align this vertically?

kippie · 07-09-2002, 06:29 PM

In the HTML below I want to align the text vertically. But I don't know how to do it. Can anyone help?

<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<div id="layer">this text should be vertically aligned in this layer. But I don't how how to do it. </div>
</body>
</html>

Kippie

Vladdy · 07-09-2002, 07:11 PM

#layer
{
...
text-align:center;
...
}

Flamerule · 07-09-2002, 07:50 PM

Vladdy, that align's the text horizontally.

Code:

vertical-align : 50%;

Should work... I'm not sure though.

kippie · 07-09-2002, 07:52 PM

Thanks Vladdy,
But I'm afraid you mean horizontal alignment. But I'm looking for vertical alignment.
Kippie

kippie · 07-09-2002, 07:54 PM

Thanks Flamerule,
But this doesn't seem to work also. Who can help?
Kippie

Vladdy · 07-09-2002, 08:41 PM

oops... excuse my original brainfart....

...ok this works in Gekko browsers as it should....

Code:

#layer 
{ position: absolute;
  display: table-cell;
  vertical-align: middle; 
  top: 16px; 
  left: 16px; 
  width: 200px; 
  height: 200px;
  border-style: dashed; 
  border-color: red; 
  visibility: visible;
 }

but I guess you would have to do this to accomodate the stoopid IE:

Code:

<table id="layer">
<td valign="center">this text should be vertically
 aligned in this layer.
 But I don't how how to do it.
</td>
</table>

kippie · 07-10-2002, 03:47 PM

Thanks,
But is there no way to align vertically without using table commands?
Kippie

Flamerule · 07-10-2002, 03:55 PM

Quote:

Code:

<table id="layer">
<td valign="center">this text should be vertically
 aligned in this layer.
 But I don't how how to do it.
</td>
</table>

It's <td valign="middle">