Often, while deciding how to structure the web page's data, there is a need to align the text accordingly. You can align text to the left, right, or center according to the desired design. In this article, we will see how to format and center align the text using CSS. 

# Using `text-align`

Take a look at the code below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <style>
    .center{
      text-align: center;
    }
  </style>
  <body>
    <h2>
      Left Align
    </h2>
    <p>
      Welcome to Edpresso!
    </p>
    <h2>
      Center Align
    </h2>
    <p class="center">
      Welcome to Edpresso!
    </p>
  </body>
</html>

codemirror

In the code above, we have defined a style class named `center`. This class has a single attribute called `text-align` that can take either of the following four inputs: `center`, `left`. `right`, and `justify`. For the sake of this article, we assigned `center` to `text-align`. To observe how it works, click on the run button and see the difference between `left` align (default) and `center` align.


# Using Padding

Take a look at the code below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <style>
    .center{
      padding: 00px 200px;
    }
  </style>
  <body>
    <h2>
      Left Align
    </h2>
    <p>
      Welcome to Edpresso!
    </p>
    <h2>
      Center Align
    </h2>
    <p class="center">
      Welcome to Edpresso!
    </p>
  </body>
</html>

It's a bit tedious to align your text by eyeballing the margin and setting the padding value, but it gives you more freedom in the way you want to style it. As in the previous example, we have a class named `center`. This class only has one attribute called `padding`. **Padding** is the numeric value in pixels that conveys how much space you want to append to the left and top of the text. Since we wish to center align text horizontally, we can leave the first argument as `00px` and set `200px` as the second argument. To observe how it works, click on the run button and look the difference between `left` align (default) and `center` align.

How to center align text using CSS

Using text-align

Using Padding

Using `text-align`