470,563 Members | 2,042 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,563 developers. It's quick & easy.

Text align within a div problem

37
Hi all,
I have a problem with aligning text within a div. I want the text to be aligned at the bottom of the div. What is wrong with his code:
Expand|Select|Wrap|Line Numbers
  1. <div style="height:150px; width:200px; line-height:150px; vertical-align:bottom; border:solid 1px red;">
  2. This text should apear at the bottom of the div!
  3. </div>
  4.  
Feb 11 '08 #1
11 2367
hsriat
1,654 Expert 1GB
Hi all,
I have a problem with aligning text within a div. I want the text to be aligned at the bottom of the div. What is wrong with his code:
Expand|Select|Wrap|Line Numbers
  1. <div style="height:150px; width:200px; line-height:150px; vertical-align:bottom; border:solid 1px red;">
  2. This text should apear at the bottom of the div!
  3. </div>
  4.  
there are two things...
1. You have applied line-height:150px => this will always keep 75 px on both sides of the text. So even if valign=bottom, it will leave 75 px below itself.
2. it doesn't seem to work with DIV, or even P,
try it with TABLE
Feb 11 '08 #2
mynkow
37
I dont care if I use line-heigth or not. I have to align the text at the bottom of the div. I MUST use div, not a table.
10x
Feb 11 '08 #3
Death Slaught
1,137 1GB
Try giving it padding.

Expand|Select|Wrap|Line Numbers
  1. div {
  2.   padding-top:120px;
  3. }
Hope it helps, Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Feb 11 '08 #4
mynkow
37
Yes, good answer. How can I miss that? I can if I am trying to do it with vertical-align. Thanks for the answer. So I have another question. In which situations should I use this sh*t vertical-align in divs?
Feb 11 '08 #5
Death Slaught
1,137 1GB
I've only seen vertical-align used in tables and used to fixed gaps between an image, and other elements. But here's a little information on it.

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Feb 11 '08 #6
drhowarddrfine
7,435 Expert 4TB
vertical-align is an inline css property and for table cells. divs are block level so it doesn't work there. It's used to align inline text, images, etc. in relation to the baseline or, more specifially, the generated inline box.
Feb 11 '08 #7
drhowarddrfine
7,435 Expert 4TB
You need to put your text inside an element if you want to position it inside a div. Right now, the text is just part of the div, but if you properly put it in a <p>, as it should be, You could using positioning to place it anywhere inside that div without resorting to padding.
Feb 11 '08 #8
mynkow
37
You need to put your text inside an element if you want to position it inside a div. Right now, the text is just part of the div, but if you properly put it in a <p>, as it should be, You could using positioning to place it anywhere inside that div without resorting to padding.
Can you give me an example because I tried as you wrote but still no effect?

Expand|Select|Wrap|Line Numbers
  1. <div style="height:150px; width:200px;vertical-align:middle; border:solid 1px red;">
  2.         <p>text align test</p>
  3. </div>
Feb 14 '08 #9
You need to put your text inside an element if you want to position it inside a div. Right now, the text is just part of the div, but if you properly put it in a <p>, as it should be, You could using positioning to place it anywhere inside that div without resorting to padding.
I guess he drives at this,
[HTML]<div style="height:150px; width:200px;vertical-align:middle; border:solid 1px red; position:relative;">
<p style=" bottom:0px; position:absolute;">This text should apear at the bottom of the div!</p>[/HTML]

Hope it helps,
Rawan.
Feb 14 '08 #10
drhowarddrfine
7,435 Expert 4TB
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div{position:relative;height:200px;width:400px;out line:1px solid blue}
p{position:absolute;bottom:0}
</style>
</head>

<body>
<div>
<p>Hello</p>
</div>
</body>
</html>[/HTML]
Feb 14 '08 #11
mynkow
37
Thank you for the help!
Feb 18 '08 #12

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Jonah Bishop | last post: by
7 posts views Thread by Robert Nicholson | last post: by
8 posts views Thread by André Hänsel | last post: by
4 posts views Thread by Steven Bethard | last post: by
7 posts views Thread by programming | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.