CSS text-align horizontal alignment

 The purpose of CSS text-align is to align horizontally. You can set features such as left, right, center, or even left and right alignment of the text. Note that text-align can only set horizontal alignment, not vertical alignment. The following List common alignment methods.

• text-align:left; //align to the left
• text-align:right; //Align to the right
• text-align:center; //center
• text-align:justify; //Make the text align left and right
• text-align:inherit; //Inherit the text-align attribute of the parent element

Left to right and centering are relatively simple. Let’s take a look at the text-align:justify property of this text-alignment. This property may not simply be perfectly aligned. It depends on the width of the text, text and even the characteristics of the browser. When the browser uses text-align:justify to align, there will be unequal spaces between texts. Please try several browsers when you use it.

The last item, text-align: inherit, is not recommended, because IE browsers below IE8 (including) do not support this attribute. It is unclear whether it will be supported in the future. In order to avoid typesetting problems, it is still It is better not to use, a little suggestion!

CSS text-align center alignment example

<div style="text-align:center;background-color:pink;width:200px;height:60">here is text</div>

Here is the text

In order to show the effect of the example more clearly, we added a pink background color ( background-color ) to the block ( DIV ) , and set the width of 200px and the height of 60px to make it look clearer. The text has been aligned in the center, but the vertical direction It is not centered. We have another article about vertical centering techniques to share, please refer to further reading. You can change the text-align:center in this example to other attributes such as left, right or justify to try.