The align in CSS is used for positioning the items along with setting the distribution of space between and around content items. We can align the items either horizontally or vertically. The various methods and techniques are used to center them, by taking care of the left and the right margin, etc. The various method for aligning & its usage are discussed below:
margin:auto: This property is used to align a block element into the center.
Note: Using margin: auto will not work in IE8 unless a !DOCTYPE is declared.
Example1: This example describes the CSS align using the margin: auto property.
position: absolute; We can align the items using this property. (static, relative, fixed, absolute, sticky).
Example 2: This example describes the CSS align using the position: absolute; property.
Note: The position properties top, bottom, left, and right will not work unless the position property is set first.
text-align: center; We can align any text written in HTML at the center. we can use this property in various kinds of tags.
Example 3: This example describes the CSS align using the text-align: center; property.
padding: To vertically align-items we can use padding.
Example 4: This example describes the CSS align using the padding property.
padding & text-align; To align the text both vertically and horizontally using a combination of padding and text-align: center.
Example 5: This example describes the CSS align using the padding & text-align properties.
- Google Chrome 95.0
- Microsoft Edge 95.0
- Firefox 93.0
- Opera 80.0
- Safari 15.0