CSS Text Alignment text-align & vertical-align with Examples

CSS align

In CSS, aligning text is crucial for creating clean, readable, and user-friendly layouts. Whether you want your text to appear on the left, center, right, or justified, CSS provides the text-align property to control horizontal alignment, and vertical-align or flexbox for vertical centering.

Syntax:

text-align: left | right | center | justify | initial | inherit;

Text Alignment with text-align

The text-align property is used to horizontally align text within an element.

Common Values:

Value	Description
left	Aligns text to the left ( default )
right	Aligns text to the right
center	Centers the text horizontally
justify	Aligns text evenly across the width

Example:

p {
  text-align: center;
}

Vertical Alignment with vertical-align

Used for inline, inline-block, or table-cell elements. It aligns content vertically relative to surrounding text or containers.

img {
  vertical-align: middle;
}

Centering Both Horizontally and Vertically

To center elements in both directions, use Flexbox:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Example:

<!DOCTYPE html>
<html>

<head>
  <style>
    .main {
      border: 1px solid black;
      margin: 10px;
      padding: 10px;
      font-size: 14px;
    }

    #justify {
      text-align: justify;
    }

    #left {
      text-align: left;
    }

    #right {
      text-align: right;
    }

    #center {
      text-align: center;
    }
  </style>
</head>

<body>
  <h2 style="text-align:center;">CSS text-align Property</h2>

  <div class="main" id="justify">
    <h4>text-align: justify;</h4>
    Welcome to Quipoin! We bring you the best and easiest way to learn web development. This text is justified.
  </div>

  <div class="main" id="left">
    <h4>text-align: left;</h4>
    Welcome to Quipoin! We bring you the best and easiest way to learn web development. This text is aligned left.
  </div>

  <div class="main" id="right">
    <h4>text-align: right;</h4>
    Welcome to Quipoin! We bring you the best and easiest way to learn web development. This text is aligned right.
  </div>

  <div class="main" id="center">
    <h4>text-align: center;</h4>
    Welcome to Quipoin! We bring you the best and easiest way to learn web development. This text is centered.
  </div>
</body>

</html>

Tips

Use justify for paragraphs in blogs/articles.
Use center for titles and buttons.
Use flexbox for better control when centering entire blocks.