Horizontal alignment of text.
Syntax
text-align: left | right | center | justify | inherit ;
left - Align text to the left. (default for left to right text)
right - Align text to the right.
center - Center the text.
justify - Align along both the left and right content edges.
inherit - inherit from the parent element.
This is an alignment of the text, but it won't move an entire block. If a block has been set to display: inline-block; then it may need to be prefixed with a <br> or an so that it will naturally wrap to the next line.
To horizontally centre the text or an image within a block element, set display: block; and then set both the left and right margins to margin-left: auto; margin-right: auto;
Applying text-align within a table cell will only work if the cell itself is sized correctly, apply width :100% to the table cell and then text-align will size the text within that width.
Examples:
h1 { text-align: center; }
.emw3class { text-align: justify; }
#emw3id { text-align: left; }
Try it:
The default alignment for text is left to right. When using narrow 'newspaper style' columns of text then applying "justify" to align along both the left and right content edges can produce a more pleasing layout of text on the screen, or on the page if printed. |
(CSS 1) Browser Support: All major browsers. Only American English spelling is supported (center not centre).
“The easiest way to vertically center something in CSS is to close your laptop and go to the bar” ~ @jakeboxer
Related:
text-align-last - How to align the last line of text.
column-gap - Gap between the columns.
font-weight - Normal, bold, bolder.
text-decoration - Add decoration to text.
text-indent - Indent the first line in a text-block.
text-overflow - What should happen when text overflows the containing element.
vertical-align - Vertical alignment of an image/element.
word-spacing - Increase or decrease the space between words in a text.
unicode-bidi - Control the inline direction of text.