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.
Search WWH ::

Custom Search