Results 1 to 12 of 12
Thread: CSS vertical text align
-
07-03-2003, 03:25 PM #1Disabled
- Join Date
- Nov 2002
- Posts
- 2,194
CSS vertical text align
This has probably discussed in this forum many times before, but I missed those discussions.
Question: using CSS, how do you align text vertically in a <p> or <div> or a <span> element. I'm looking to vertically align a set of text to the middle of an element. Left to right alignment is no problem; I just need vertical alignment.
A quick reply would be appreciated.
Thanks,
E.A.1
-
07-03-2003, 03:59 PM #2Web Hosting Master
- Join Date
- Sep 2002
- Location
- Illinois
- Posts
- 2,307
How's my programming? Call 1-800-DEV-NULL1
-
07-04-2003, 10:24 AM #3Disabled
- Join Date
- Nov 2002
- Posts
- 2,194
Thanks for your reply.
However, I had already been to the w3schools site and what I saw there did not provide the answer I'm looking for. The vertical-align property only works for vertical alignment of text against an image. I want to vertically align text within an element without having to specify it from an image element.
I have a temporary solution where I create a table and use "valign" to align the text vertically, but I would like to have a CSS only solution.
CSS already has a horizontal align, "text-align:center", but I have not found a similar property for vertical alignment.
Thanks again,
E.A.1
-
07-04-2003, 12:36 PM #4Web Hosting Master
- Join Date
- Jan 2003
- Posts
- 674
Dont think there is one ive searched for this before.
1
-
07-04-2003, 01:12 PM #5Web Hosting Master
- Join Date
- May 2002
- Location
- UK
- Posts
- 2,997
Did anyone actually visit that link above... it gives you the CSS vertical-align property!!!
1
-
07-04-2003, 11:04 PM #6Aspiring Evangelist
- Join Date
- Jan 2002
- Location
- Adelaide, Australia
- Posts
- 405
You can do it - it's pretty messy though, the vertical-align propery doens't work very well (not as you would expect it to work anyway).
I will try and dig up the article I have seen on how to 'hack' a real vertical align.0
-
07-05-2003, 10:12 AM #7Disabled
- Join Date
- Nov 2002
- Posts
- 2,194
Thanks for trying guys.
Rich2K: I did visit the link, as I've done many times in the past. The vertical-align property is used with an image for vertically aligning text that appears next to it; it is not used independently on any element for vertical alignment of text. If I'm wrong, please correct me and show me how to use it without an image involved.
Platinum: like I indicated in my original post at top, I have a work-around using a table for centering with the "valign" property. I'm looking for a true 'vertical-align' property in CSS. I haven't found one yet.
In another occasion, I had to do my own calculations for vertically centering of text in an element. Basically, you need to know the dimensions of the containing element, the font size being used, and the length of the text string to be displayed in the container. But I'm looking for a ready-made solution in CSS.
Thanks again,
E.A.0
-
04-18-2004, 12:10 PM #8New Member
- Join Date
- Apr 2004
- Location
- Rio de Janeiro, Brazil
- Posts
- 1
I've found something that may work for thee...
www,hicksdesign,co,uk/articles/css/vertical_centering_with_css/
But change the commas into dots, because they do not allow to send urls on my first message. Well, I guess they've got their reasons...
If you're still alive since last reply...
cya
bitFreeze0
-
04-18-2004, 04:51 PM #9Junior Guru Wannabe
- Join Date
- Apr 2004
- Location
- A house on the beach
- Posts
- 54
Have you tried using absolute positioning?
Serious pain, and I've never done it, but I think it can be done using css only.0
-
04-19-2004, 11:15 AM #10Disabled
- Join Date
- Nov 2002
- Posts
- 2,194
Originally posted by bitFreeze
I've found something that may work for thee...
www,hicksdesign,co,uk/articles/css/vertical_centering_with_css/
But change the commas into dots, because they do not allow to send urls on my first message. Well, I guess they've got their reasons...
If you're still alive since last reply...
cya
bitFreeze
Going on a year since I posted the original question. I'd forgotten about it. But, the original question seeking a CSS solution for vertical centeting of text in an element was never answered. As I stated in my last post in this thread, I created my own solution using scripting for determining the positioning of text.
In the future I'll try to use the solution presented in your reply.
Meanwhile, although CSS can handle most of what HTML can do, I'll continue using a mix of HTML and CSS for my web pages. CSS by itself is not ready to take over.
thanks...0
-
11-08-2007, 11:14 PM #11New Member
- Join Date
- Nov 2007
- Posts
- 1
Possible answer using CSS
---"But, the original question seeking a CSS solution for vertical centeting of text in an element was never answered. As I stated in my last post in this thread, I created my own solution using scripting for determining the positioning of text."---
Hi There,
it has probably been even longer that a year now since this thread started. I found a CSS solution
you need to make sure your text is wrapped in a <p></p> tags.
This way you can use "vertical-align:middle;"
p{
vertical-align:middle;
}
OR
.your-class p{
vertical-align:middle;
}
I discovered the same problem and did a Google search for "css, w3c schools, vertical text align"
I think it has something to do with the DOM and the referencing of the text that it is meant to style. This solution above is for the spot where you want to just vertical align a particular text area.
Hope this helps someone passing through.0
-
11-09-2007, 03:30 AM #12Junior Guru Wannabe
- Join Date
- Oct 2007
- Posts
- 52
IE 7 doesn't align text vertically when using verticle-align. Make your line-height the same height as the element.
Try this in your css,
.element {
height:25px; (or whatever height you want)
line-height:25px; (match 'line-height' to 'height')
}
It should automatically align your text in the middle. That should work.Jeff S.0