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
</a>
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”>