I'm having one hell of a hard time figuring out how to do this. I'll start by saying I don't have a working example right now - this is conceptual at this point. If my description isn't good enough, I'll put something together, but hopefully this will be clear.
I am using a class to create a container that will act like a button. This class has a specific height, a specific width, a background image (which is exactly that height and width), and provisions for text within that container. One of those provisions is that the text be centered both horizontaly and vertically.
To create my buttons, I would simply create a link and specify that class. Centering the text horizontally is not a problem (text-align works fine).
If I were to fix the text to be a specific size, simple math would determine how much padding I needed to use for that text to be centered vertically as well. Similarly, if the container were allowed to be a variable size, I would be fine too.
But the container must retain its settings, and the text must be resizable. The container is suitably large (height:51px), so I doubt anyone's browser settings will blow the container open. Given these variables, how do I get the text centered vertically? I've tried nested classes, where the inside one specifies a line-height; I've tried using positioning on a nested class within the original container. Nothing seems to work. Any ideas?Problem solved. In case anyone is wondering, here's a link to the answer I found (this might help explain the original dilemma better too).
<!-- m --><a class="postlink" href="http://www.plhmedia.com/ex/help/help.html">http://www.plhmedia.com/ex/help/help.html</a><!-- m -->
I am using a class to create a container that will act like a button. This class has a specific height, a specific width, a background image (which is exactly that height and width), and provisions for text within that container. One of those provisions is that the text be centered both horizontaly and vertically.
To create my buttons, I would simply create a link and specify that class. Centering the text horizontally is not a problem (text-align works fine).
If I were to fix the text to be a specific size, simple math would determine how much padding I needed to use for that text to be centered vertically as well. Similarly, if the container were allowed to be a variable size, I would be fine too.
But the container must retain its settings, and the text must be resizable. The container is suitably large (height:51px), so I doubt anyone's browser settings will blow the container open. Given these variables, how do I get the text centered vertically? I've tried nested classes, where the inside one specifies a line-height; I've tried using positioning on a nested class within the original container. Nothing seems to work. Any ideas?Problem solved. In case anyone is wondering, here's a link to the answer I found (this might help explain the original dilemma better too).
<!-- m --><a class="postlink" href="http://www.plhmedia.com/ex/help/help.html">http://www.plhmedia.com/ex/help/help.html</a><!-- m -->