HTML and CSS Reference
In-Depth Information
To give you an understanding of each technique, steps are provided that ask you to make changes to the project
files, then undo those changes to try the next technique. If you want to follow along, please do. However, if you just
want to understand the technique that the Cool Shoes & Socks page will use, please follow the instructions for the
third technique only.
The Fake Table Cells Technique
If you can't go to the party, you can bring the party to you. You can use vertical-align only on inline-level
and table-cell elements, so cheat and use display: table-cell; as follows:
1. In styles.css, add the declaration display: table to the .showcase rule set:
display: table;
2. Remove the following declarations from the .showcase .button rule set:
position: absolute;
top: 0;
3. Add a width declaration to the .showcase img rule set:
width: 100%;
4. Add a new rule set below the .showcase .button rule set:
.button-cell {
display: table-cell;
vertical-align: middle;
width: 148px;
5. Save styles.css.
When you use display: table-cell; on an element, that element must be contained in a table (or an
element mimicking a table with the declaration display: table; ). Because the showcase <div
class=”showcase”> contains the showcase button, that is given the declaration display: table; .
If the .showcase .button rule set were to be given the declaration display: table-cell; , the
button would become 100% tall because cells stretch to fill the entirety of the containing table. This is the
downfall to using fake table cells. Although this approach emulates vertical alignment beautifully, it re-
quires an additional element to be wrapped around the one you want to vertically align to prevent that ele-
ment from becoming 100% tall.
6. In index.html, modify:
<a class=”button purchase” href=”#” title=”Purchase product”>
More Information
Make sure it is contained in a <div> with the class button-cell :
<div class=”button-cell”>
<a class=”button purchase” href=”#” title=”Purchase product”>
Search WWH ::

Custom Search