tutorialstonight logo
A Platform To Learn To Code

CSS ALIGN



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.

Example

Run the code


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.

Example

Run the code

Output:

This container is in center.


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.

Example

Run the code


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.

Example

Run the code