Welcome to WebmasterWorld Guest from 54.234.153.186

Forum Moderators: not2easy

Message Too Old, No Replies

Align text vertically in a box

vertically, align, text, in a box

     

jo_soap

10:21 am on Jul 12, 2007 (gmt 0)

5+ Year Member



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

10:33 am on Jul 12, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

12:51 pm on Jul 12, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

4:37 pm on Jul 12, 2007 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month