Results 1 to 8 of 8

Thread: Vertically Aligning a label in a container, or the text in a label

  1. #1

    Thread Starter
    Addicted Member Kezmondo's Avatar
    Join Date
    Oct 2001
    Location
    England
    Posts
    166

    Vertically Aligning a label in a container, or the text in a label

    Hi, on a web page, I want a fixed height space reserved for a message. This message could be multiple lines long, say up to 3.

    When a message is programatically entered into this space, I want it to appear vertically aligned inside the space.

    So, for example, I could have a panel for the space, and put a label in it. The label is vertically aligned inside the panel. But I can't seem to get that to work. Or I could just have a fixed height label and have the text vertically aligned inside it. But I can't find a way to do that either.

    Oh, and I don't want to use tables

    How can this be done? Seems like it should be easy...

  2. #2
    I'm about to be a PowerPoster! mendhak's Avatar
    Join Date
    Feb 2002
    Location
    Ulaan Baator GooGoo: Frog
    Posts
    38,173

    Re: Vertically Aligning a label in a container, or the text in a label

    What do you mean by vertically aligned? I don't understand what you mean by not being able to get it to work - vertical alignment is a concept of alignment, but there are several places in a panel that the label could appear. So it could be center aligned, top aligned, bottom aligned, etc.

  3. #3

    Thread Starter
    Addicted Member Kezmondo's Avatar
    Join Date
    Oct 2001
    Location
    England
    Posts
    166

    Re: Vertically Aligning a label in a container, or the text in a label

    Sorry if I wasn't clear.
    I would like the text to be centered vertically inside a fixed height container:

    So for a single line of text would look like this:


    |------------------------------
    |
    |
    | A single lined message
    |
    |
    |------------------------------



    and a multi-liner would look like this:

    |------------------------------
    |
    | A triple lined message
    | A triple lined message
    | A triple lined message
    |
    |------------------------------



    If I have a large label, the text is always vertically aligned to top, and if I stick a label inside a panel, the label is vertically aligned to top within the panel.

    Hope that's clearer.

  4. #4
    I'm about to be a PowerPoster! mendhak's Avatar
    Join Date
    Feb 2002
    Location
    Ulaan Baator GooGoo: Frog
    Posts
    38,173

    Re: Vertically Aligning a label in a container, or the text in a label

    Try

    vertical-align: middle

    You can also set the line-height to be the height of the container.

  5. #5

    Thread Starter
    Addicted Member Kezmondo's Avatar
    Join Date
    Oct 2001
    Location
    England
    Posts
    166

    Re: Vertically Aligning a label in a container, or the text in a label

    Hi Mendhak, sorry for the delay in replying

    Setting line-height is fine as long as the text fits on one line. But if the text goes onto mulitple lines you get gaps between the lines as it uses your line-height setting for each of them. Which makes sense.

    Vertical-align: middle doesn't do anything when used on the label or the panel. If I put the label in tablecell which has verticalalign="Middle", it works. But I can't do it without tables...

  6. #6
    I'm about to be a PowerPoster! mendhak's Avatar
    Join Date
    Feb 2002
    Location
    Ulaan Baator GooGoo: Frog
    Posts
    38,173

    Re: Vertically Aligning a label in a container, or the text in a label

    I see, you can then use

    Code:
    display:table-cell;
    vertical-align:middle;
    (and remove the line height)

    on the DIV.

  7. #7
    Banned timeshifter's Avatar
    Join Date
    Mar 2004
    Location
    at my desk
    Posts
    2,465

    Re: Vertically Aligning a label in a container, or the text in a label

    How well would that work in IE? As I recall, last time I tried toying with the table-cell stylings for divs, it worked fine in Fx, but failed miserably in IE7...

  8. #8
    I'm about to be a PowerPoster! mendhak's Avatar
    Join Date
    Feb 2002
    Location
    Ulaan Baator GooGoo: Frog
    Posts
    38,173

    Re: Vertically Aligning a label in a container, or the text in a label

    Works in IE, but I'm using IE8. Another way would be to put the text in a div, give the div an absolute position and give it a top of 50%.

Posting Permissions

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



Click Here to Expand Forum to Full Width