Learn
Visual Rules
Text Align
In this lecture, we'll explore how to align text horizontally and vertically using the text-align
property.
Aligning Text Horizontally
The horizontal alignment of text can be set with the text-align
property. The text-align
property can have four values: left
, right
, center
, and justify
.
left
: This value aligns text to the left edge of the containing block.right
: This value aligns text to the right edge of the containing block.center
: This value centers text horizontally within its containing block.justify
: This value justifies the text. Justified text is aligned to both the left and right edges of its containing block.
Aligning Text Vertically
The vertical alignment of text can be set with the line-height
property. The line-height
property specifies the height of a line box, which determines the placement of text within that line.
We can vertically align text within a block element by setting the height of the containing block to be equal to the line-height of the text, and then setting the line-height
property of the text to be equal to the height of the containing block.
By using these techniques and properties, we can control the horizontal and vertical alignment of text and create visually pleasing designs.
Instructions
Add a rule to style the h2
element to be aligned to the right.
Add a rule to style the p
elements to be aligned to the left.
Add a rule to style the .title
class to be aligned to the center.
Sign up to start coding
Already have an account?
Sign In