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.

google rocks

http://www.w3schools.com/css/pr_pos_vertical-align.asp

:)

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.

Dont think there is one :( ive searched for this before.

Did anyone actually visit that link above... it gives you the CSS vertical-align property!!!

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. :)

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.

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

Have you tried using absolute positioning?
Serious pain, and I've never done it, but I think it can be done using css only.

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

WOW!

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...

---"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.

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.