HTML and CSS Reference
In-Depth Information
right: 2.1875em;
margin-top: -26px;
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.
