CSS Align-items Property
The align-items property defines how grid items are aligned in the opposite direction, along the column axis.
Or in other words -
We align items horizontally using the property.
Like justify-items, this property is set on the container.
Syntax -
Values of the property are given below -
It has a total of four values-
1. stretch
Items are stretched along the row axis to fill the entire width of the cell. This is the default
2. start
Items are aligned with the starting edge of the cell along the row axis
3. End
Items are aligned with the ending edge of the cell along the row axis
4. Center
Items are centered along the row axis in their cells.
Now we will see Examples -
Example -
Lining the dollar symbol to middle -
class="cost">
class="cost-currency">$
class="cost-dollars">20
class="cost-cents">.00
class="cta-button" href="/pricing">
Sign up
|
Output -
Without the property -
