CSS Text Alignment - Blackbox Learning Docs

CSS Text Alignment and Text Direction

Text Alignment

The text-align property is used to set the horizontal alignment of a text.

This property can have one of the following values:

left - Aligns the text to the left
right - Aligns the text to the right
center - Centers the text
justify - Stretches the lines so that each line has equal width

When the text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers):

Example

div {

text-align: justify;

}

Text Align Last

The text-align-last property specifies how to align the last line of a text.

This property can have one of the following values:

auto - Default value. The last line is justified and aligned left
left - The last line is aligned to the left
right - The last line is aligned to the right
center - The last line is center-aligned
justify - The last line is justified as the rest of the lines
start - The last line is aligned at the start of the line
end - The last line is aligned at the end of the line

Example

Different alignment of the last line in three <p> elements:

p.a {

text-align-last: right;

}

p.b {

text-align-last: center;

}

p.c {

text-align-last: justify;

}

Vertical Alignment

The vertical-align property sets the vertical alignment of an element.

This property can have one of the following values:

baseline - Default value. The element is aligned with the baseline of the parent
length/% - Raises or lower an element by the specified length or percent
sub - The element is aligned with the subscript baseline of the parent
super - The element is aligned with the superscript baseline of the parent
top - The element is aligned with the top of the tallest element on the line
text-top - The element is aligned with the top of the parent element's font
middle - The element is placed in the middle of the parent element
bottom - The element is aligned with the lowest element on the line
text-bottom - The element is aligned with the bottom of the parent element's font