In my last post, I showed you a way to create rollover buttons that work in many different browsers without using JavaScript. I decided to use different images for different button states (like “normal”, “mouseover”) and use plain text for the button caption. This way, you have the advantage to use one and the same set of images for all buttons that have the same size. If you include your text in the images, you’ll need unique graphics for every button.
Unfortunately, there is one problem about plain text: alignment. Although it is quite easy to align text horizontally by using “text-alignment:center” in your CSS file, it was quite hard for me to figure out how to align the text vertically.
The first thing I tried was using “vertical-align:middle”. This might sound like the perfect solution, but as a matter of fact, it is not. The vertical-align keyword controls the behaviour of adjacent elements of different size, like text with different font sizes. And the most important fact about vertical-align is: It is relative to the lineheight, NOT to the height of the parent element. Believe me, it took a long time for me to figure this out. And to understand it.
So what do you do if you want to vertically center a line of text, e.g. in a button? You might have guessed the answer: use the lineheight keyword. Since the vertical-align keyword defines the behaviour relative to the lineheight, you can combine the two keywords to get the desired effect.
In my case, I just set the lineheight of the text to the height of the button, and specified “vertical-align:middle”. And it works.
Check out this explanation to see how it works in detail.
Popularity: 1% [?]
Loading tweets...