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: -
<div style="height:150px; width:200px; line-height:150px; vertical-align:bottom; border:solid 1px red;">
-
This text should apear at the bottom of the div!
-
</div>
-
11  2585 
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:
-
<div style="height:150px; width:200px; line-height:150px; vertical-align:bottom; border:solid 1px red;">
-
This text should apear at the bottom of the div!
-
</div>
-
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
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
Try giving it padding. - div {
-
padding-top:120px;
-
}
Hope it helps, Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
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?
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](")
(")(")
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.
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.
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? - <div style="height:150px; width:200px;vertical-align:middle; border:solid 1px red;">
-
<p>text align test</p>
-
</div>
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.
[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]
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Jonah Bishop |
last post by:
I have a puzzling problem with centering text, and I'm hoping that someone
here can help me out. First of all, let me state that I am using XHTML 1.0
Strict and CSS for all layout purposes (no...
|
by: Robert Nicholson |
last post by:
So I've got one page where I have an image inside a DIV with
text-align: center and the
image is correctly centered in that block. Making me think that
text-align will center the contents of a...
|
by: André Hänsel |
last post by:
Hi!
When I put a table into a table and try to align it right, it works in IE
but not in Firefox.
Simplest code to reproduce:
<html>
<body>
<table style="width: 100%">
<tr>
|
by: sweep |
last post by:
Hi there,
I have a problem with some CSS I'm writing and I was looking for a little
help. I have a nav bar at the top and left side of my page in CSS which work
fine. The remaining space has a...
|
by: Steven Bethard |
last post by:
I have some plain text data and some SGML markup for that text that I
need to align. (The SGML doesn't maintain the original whitespace, so I
have to do some alignment; I can't just calculate the...
|
by: programming |
last post by:
Hi all,
i have been having trouble with a login script that works on my
windows machine, however when i upload it to the Unix server through
VPN, the same script won't work! It won't parse...
|
by: plumba |
last post by:
Hi all.
I have a form which has a table and within the rows of the table are simple text input boxes. The ONLY problems with this is that when the form is posted (in text format) if the number of...
|
by: ismailc |
last post by:
Hi, I need help please!
I want to vertical align the text within a text box.
I can set the vertical align of the text box but not the text.
My text box has a style property of: style...
|
by: littlealex |
last post by:
IE6 not displaying text correctly - IE 7 & Firefox 3 are fine! Need some help with this as fairly new to CSS!
In IE6 the text for the following page doesn't display properly - rather than being...
|
by: chazzy69 |
last post by:
The problem is as follows, i am inputing text and images from another source via my php script, now when i try to display the text and images into a page of my own styling the text and images skewed...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
| |
