-
Feb 25th, 2009, 09:56 AM
#1
Thread Starter
Addicted Member
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...
-
Feb 26th, 2009, 05:59 AM
#2
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.
-
Feb 26th, 2009, 06:24 AM
#3
Thread Starter
Addicted Member
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.
-
Feb 27th, 2009, 03:17 AM
#4
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.
-
Mar 4th, 2009, 10:54 AM
#5
Thread Starter
Addicted Member
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...
-
Mar 4th, 2009, 01:10 PM
#6
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.
-
Mar 5th, 2009, 10:13 AM
#7
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...
-
Mar 9th, 2009, 07:38 AM
#8
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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|