Align text vertically in a box

vertically, align, text, in a box

[jo_soap]

Hi,

I have a box on a web page in which I need to position the text in the bottom right coner.

The method I'm using below isn't working! So any guidance will be greatly appreciated.

In my html doc I have:

<div id= "box1" >
<span style= "vertical-align:text-bottom">My text</span>
</div>

and in my style sheet I have:

#box1 {
position: absolute;
width: 125px;
height: 100px;
top:150px;
left:100px;
text-decoration: none;
font-size: 0.96em;
font-family: Arial, Helvetica, sans-serif;
color:#1880B4;
text-indent:60px;
display:block;
border-style:solid;
border: 1px 1px 1px 1px;
border-color:#980045;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background-color:#FFFFFF;
}

I'm not a CSS pro obviously but I'm trying hard and making good progress.

Thanks, Jo

[benihana]

try writing the html like so:

<div id= "box1">
<p>My text</p>
</div>

and adding the following to your CSS:

#box1 p {
position:absolute;
right:0px;
bottom:0px;
}

Ben

[Marshall]

Either:

{ vertical-align: bottom; }
-or-
{ vertical-align: text-bottom; }
- with -
{text-align: right}
Other options are:

{ vertical-align: baseline; }
{ vertical-align: sub; }
{ vertical-align: super; }
{ vertical-align: top; }
{ vertical-align: text-top; }
{ vertical-align: middle; }
{ vertical-align: 25%; }

Hope this helps,
Mraashall

[penders]

I think benihana's suggestion is the way to go, as I don't believe you can vertical-align the contents of anything other than a table-cell. So, you could try display:table-cell, but you will likely hit some browser incompatibilities!