CSS provides us various methods to align elements on the web page.Some of the text and box aligning methods are discussed below.
CSS text align
The text-align is used to align text inside any container.
The text-align has following values:
- left - It aligns the text to the left of the container.It is default value.
- right - It aligns the text to the right of the container.
- center - It aligns the text to the center of the container.
- justify - When the value specified is 'justify' the text fills the space of the container exactly
- start - It aligns the text from the starting of the container.When the direction: rtl; then starting position is right so it will start from right side and will look as if it's right aligned.
- end - It aligns the text from the ending of the container.When the direction: rtl; then ending position is left so it will end at left side and will look as if it's left aligned.
- inherit - It inherits text-align value from its parent element.
Align element horizontally center
To align any element or container horizontally center use margin property and set its value to auto.It will create equal left and right margins which makes the container align to center.
To see the effect you must set the width value of the container which is less than 100% width value otherwise the effect will not be visible.
vertically center - using padding
We can align elements vertically center by using padding property.Just Specify equal top and bottom padding value and it will align vertically center.
vertically center - using line height
We can align elements vertically center by using line-height property.Specify equal line-height as the height of the container.