How to align an element with the CSS text-align property
When layout pages of a site or when publishing new materials, there may be a need to align the content of an element on either side. For this there is a special CSS styles correctly - text-align , which has several meanings. How to use it and what values it has - will be discussed below.
First of all, it is necessary to clarify that the text-align property is intended only for the horizontal alignment of any inline elements within an element. That is, not only text can be aligned in this way, but also any linear content, for example, images can be aligned.
Example property syntax:
.class {
text-align: center;
}
What values does the text-align property have? There are not so many of them, let's list the main ones:
- center - aligns the content of the block in the center;
- justify - aligns the content of the block to the width;
- left - aligns the content of the block to the left;
- right - aligns the content of the block to the right;
- auto - the alignment does not change;
- inherit - the values of the parent element are inherited.
There are also additional values, their support must be checked in a specific browser:
- start - the value behaves like left if the direction is from left to right, and right if it's the other way around;
- end - the value behaves like right if the direction is from left to right, and left if it is vice versa;
- match-parent - like inherit with the difference that start and end are calculated according to the direction of the text and are replaced with the corresponding left or right value;
- string - you can specify any line of text for alignment, this allows you to align numeric values with a decimal point, for example, you can specify "." .
Thus, it will not be difficult to align any inline (linear) element. This property is supported by all browsers, only new optional values should be used with caution.
Latest articles
- 09.07.22IT / Misc Convert office files DOC, DOCX, DOCM, RTF to DOCX, DOCM, DOC, RTF, PDF, HTML, XML, TXT formats without loss and markup changes
- 07.07.22IT / Safety How to protect PHP, JS, HTML, CSS source code - obfuscation, minification, compression and encryption
- 06.07.22IT / Safety Connection not secure, problem with Lets Encrypt - how to fix expired 09/30/2021 DST Root CA X3, remove it manually and install ISRG Root X1. Example on MS Windows 7
- 08.07.21IT / Misc How to make a free translation for a website without an API, translate documents in Google Translate
- 06.07.21IT / Misc How to make a subscription button on a website, a subscriber base and automatic mailing