Aligning Text - HTML

Multiple properties in CSS control the formatting of text. Several properties allow you to align text horizontally and vertically—aligning with other pieces of text or other elements around them.

Controlling horizontal alignment
You can use the text-align property to align blocks of text in four basic ways: left, right, center, or full. The following code and the output show the effect of the justification settings:

The four basic types of text justification.

The four basic types of text justification.

Note that the default justification is left; that is, the lines in the block of text are aligned against the left margin and the lines wrap where convenient on the right, leaving a jagged right margin.In addition to the four standard alignment options, you can also use text-align to align columnar data in tables to a specific character. For example, the following code results in the data in the Amount Due column being aligned on the decimal place:
Note:Columnar alignment using the text-align property is not well supported in today’s user agents. You should test your target agents to ensure compliance before using text-align this way.

Controlling vertical alignment
In addition to aligning text horizontally, CSS enables you to align text to objects around it via the vertical-align property.

The vertical-align property supports the following values:

  • baseline—This is the default vertical alignment; text uses its baseline to align to other objects around it.
  • sub—This value causes the text to descend to the level appropriate for subscripted text, based on its parent’s font size and line height. (This value has no effect on the size of the text, only its position.)
  • super—This value causes the text to ascend to the level appropriate for superscripted text, based on its parent’s font size and line height. (This value has no effect on the size of the text, only its position.)
  • top—This value causes the top of the element’s bounding box to be aligned with the top of the element’s parent bounding box.
  • text-top—This value causes the top of the element’s bounding box to be aligned with the top of the element’s parent text.
  • middle—This value causes the text to be aligned using the middle of the text and the mid-line of objects around it.
  • bottom—This value causes the bottom of the element’s bounding box to be aligned with the bottom of the element’s parent bounding box
  • text-bottom—This value causes the bottom of the element’s bounding box to be aligned with the bottom of the element’s parent text.
  • length—This value causes the element to ascend (positive value) or descend (negative value) by the value specified.
  • percentage—This value causes the element to ascend (positive value) or descend (negative value) by the percentage specified. The percentage is applied to the line height of the element.

The following code and the output shows the effect of each value:

The effect of various vertical-align settings. Borders were added to the text to help contrast the alignment.

The effect of various vertical-align settings. Borders were added to the text to help contrast the alignment.


Of course, text isn’t the only element affected by an element’s vertical-align setting—all elements that border the affected element will be aligned appropriately. The image has the vertical-align property set to middle. Note how the midpoint of both elements is aligned.

The vertical-align property can be used to vertically align most elements.

The vertical-align property can be used to vertically align most elements.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics