HTML and CSS Reference
4. Save styles.css.
As shown in Figure 9-24, the button is now vertically aligned. When you give the button a top position of 50%, the
top of the button is placed in the vertical center of the product showcase. However, this isn't a true vertical align-
ment. For it to be perfectly centered, the vertical center of the button needs to be in the vertical center of the show-
case. To achieve this result, you specify a margin-top of -26px , half of the element's overall height, which pulls
up the button by 50%.
Figure 9-24 The showcase button is now vertically aligned.
Yes, this breaks the rule I've mentioned several times already: You should try not to declare or expect an element to
be a specific height because in some browsers, users can change the font size to their liking.
Because the showcase button doesn't have a specified height, though, it stretches with the size of the text. So with
this technique, unlike the Stretched Element technique, the text doesn't break out of its containing box.