HTML and CSS Reference
In-Depth Information
The Stretched Element technique is another useful method, particularly because it's so easy and can horizontally
center an element, too. However, when you are increasing the size of text in a browser such as Firefox, as shown in
Figure 9-23, although the button always stays vertically centered, the text breaks out of the button. Because the pur-
pose of resizing text is to make a page more readable, the user may be annoyed to find this happens to the text at a
larger size.
Figure 9-23
The showcase button vertically centered but with a larger font size in Mozilla Firefox.
The 50% Top Minus Half the Elements Height Technique
Another solution, and the final solution used for the Cool Shoes & Socks page, is to set the top position of the show-
case button to 50% and then pull up the button by half of its own height to make it vertically centered:
1.
Undo the changes made for the Stretched Element technique.
2.
In styles.css, change the top declaration in the
.showcase .button
rule set:
top: 50%;
3.
In the same rule set, add the following declarations:
font-size: 1.6em;
