HTML and CSS Reference
In-Depth Information
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;
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;
Search WWH ::

Custom Search