HTML and CSS Reference
In-Depth Information
6.
Move the
Buy Now
button to the bottom of each column and center it by setting its
top margin to
auto
and
align-self
to
center
like this:
article>button {
margin-top: auto;
-webkit-align-self: center;
align-self: center;
}
7.
Next, move the
<figure>
from below the text to just below the
<h3>
heading. Setting
the
order
property of the
<figure>
to −
1
moves it above the heading, so you also
need to set the heading to a lower number. After adding the following styles, the
page should look like Figure
22-35
:
article>figure {
-webkit-order: -1;
order: -1;
margin-top: 0;
margin-bottom: 0;
}
article>h3 {
-webkit-order: -2;
order: -2;
margin-top: 0;
}
