Results 1 to 12 of 12
  1. #1
    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 Not allowed!

  2. Thread Summary The OP (Original Poster or Thread Starter) aks one question:

    Using CSS, how do you align text vertically in a <p> or <div> or a <span> element?

    Although it took some time, an answer was provided in Post #11.
    Quote Originally Posted by willdonovan View Post
    ... 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;
    }
    The following post (Post #12) offers an alternative.
    Quote Originally Posted by BXmanagement View Post
    .element {
    height:25px; (or whatever height you want)
    line-height:25px; (match 'line-height' to 'height')
    }

    Contributors: SoftWareRevue

  3. #2
    Join Date
    Sep 2002
    Location
    Illinois
    Posts
    2,304
    How's my programming? Call 1-800-DEV-NULL
      1 Not allowed!

  4. #3
    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 Not allowed!

  5. #4
    Join Date
    Jan 2003
    Posts
    674
    Dont think there is one ive searched for this before.
      1 Not allowed!

  6. #5
    Join Date
    May 2002
    Location
    UK
    Posts
    2,994
    Did anyone actually visit that link above... it gives you the CSS vertical-align property!!!
      1 Not allowed!

  7. #6
    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 Not allowed!

  8. #7
    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 Not allowed!

  9. #8
    Join Date
    Apr 2004
    Location
    Rio de Janeiro, Brazil
    Posts
    1

    Talking

    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
      0 Not allowed!

  10. #9
    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 Not allowed!

  11. #10
    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
    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...
      0 Not allowed!

  12. #11

    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 Not allowed!

  13. #12
    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 Not allowed!

  14. Newsletters

    Subscribe Now & Get The WHT Quick Start Guide!

Related Posts from theWHIR.com

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •