homepage Welcome to WebmasterWorld Guest from 54.204.127.59
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Align text vertically in a box
vertically, align, text, in a box
jo_soap




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

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




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

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




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

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




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

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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved