Sololearn blogHow to Align Text with CSS: A Guide to Horizontal and Vertical Text Alignment on a Webpage
time to read 5 min read

How to Align Text with CSS: A Guide to Horizontal and Vertical Text Alignment on a Webpage

Have a gorgeous design in mind for your website? It probably doesn’t involve having text aligned in strange ways all over it. 

Aligning text on your site is vital to ensure your website looks great and flows well to your visitors( and  is a task that web designers and developers often have to tackle).

Alignment is part of web page styling, and the CSS text-align property is the easiest approach to align text content on a web page.

We’ll go over the different ways to use text-align, how to use them, and when you should use each one.

Text Alignment Styles in CSS: Horizontal Alignment

The CSS text-align is a property for aligning text along the horizontal axis of web pages. 

P {
  text-align: /* the alignment direction*/ ;
}

You can text-align with CSS by using the following values:

  • Center 
  • Right 
  • Left 
  • Justify

Horizontal Text Alignment  With External CSS

Center Aligned Text

The text-align center value positions your text in the center of the webpage. 

Most developers often use the center value for headlines since it distinguishes them from the rest of the text. 

Also, Centering a paragraph makes it hard to read and understand and consider using this property for titles, calls to action, and quotes.

How to Center Text in CSS

Write your HTML content and then add text-align: center value to the text selector in the CSS sheet. 

<h1>How to Center Align Text in CSS</h1>
/* we want to center the h1 above */
h1 {
  text-align: center;
}

Right Aligned Text

The text-align right value places your text on the web page’s right side. You can use this attribute to create a design or to highlight a specific text.

How to Right Align Text in CSS

To achieve this, add text-align: right; to the text selector in the CSS sheet.

Example: 

<p>I'm learning how to align text on a webpage and I won't give up until I'm good at what I'm learning.</p>
/* we want to right align the <p> above */
p {
  text-align: right;
}

Left Aligned Text

The text-align left value is the HTML’s default text style. The property places your text on the web page’s left side. 

How to Left Align Text With CSS

To accomplish this, add text-align: left; to the text selector in your CSS sheet.

Example:

<p>I'm learning how to align text on a webpage and I won't give up until I'm good at what I'm learning.</p
/* we want to left align the <p> above */
p {
  text-align: left;
}

Justified Text

The justified text property stretches your content across the web page, ensuring no spaces on the page’s margins. 

How to Justify Text 

All you’ve to do is add text-align: justify; to the text selector in your CSS sheet.

HTML
<p>I'm learning how to align text on a webpage and I won't give up until I'm good at what I'm learning. I’m learning how to align text on a webpage and i won’t give up until i’m good at it.</p>
/* we want to justify the <p> above */
p {
  text-align: justify;
}

NOTE!

In some cases, you might want to specify a paragraph you wish to align out of the many paragraphs on your webpage. 

All you have to do is give your <p> tag an ID.

For instance,

<p>I'm learning how to align text on a webpage and I won't give up until I'm good at what I'm learning.</p>
<p id="second">I'm learning how to align text on a webpage and I won't give up until I'm good at what I'm learning.</p>
<p>I'm learning how to align text on a webpage and I won't give up until I'm good at what I'm learning.</p>
/* in the stylesheet */
#second {
  text-align: right;
}

HTML Text Alignment ( Inline And Internal CSS)

There are other ways of aligning your text in HTML. You can align your text in HTML by using the inline or internal CSS. 

With inline CSS, you can align your text by adding style=”text-align: “style; ” to your HTML tag. 

Let’s look at some examples.

Example 1: Center Text Alignment 

To achieve center text alignment with Inline CSS you will add the tag style= “text-align:”center;” to your HTML  tag. 

<html>
  <head>
    <title>Center Text Alignment</title>
  </head>
  <body>
    <h1 style="text-align: center;">You can align your text with this method.</h1>
  </body>
</html>

Example 2: Left Text Alignment 

<html>
  <head>
    <title>Left Text Alignment</title>
  </head>
  <body>
    <p style="text-align: left;">I'm learning how to align text on a webpage and I won't give up until I'm good at what I'm learning.
    <p>
  </body>
</html>

Align Text With Internal CSS

The internal CSS is also done in the HTML file; the difference from the inline method is that the style will be within the HTML <head> tag.

Example:3 Right Text Alignment 

<html>
  <head>
    <title>Right Text Alignment</title>
    <style>
      P {
        Text-align: right;
      }
    </style>
  </head>
  <body>
    <p>I'm learning how to align text on a webpage and I won't give up until I'm good at what I'm learning.</p>
  </body>
</html>

Vertical Alignment: How To Center Text On A Web Page

So far, we’ve talked about how to use the text-align property to position text horizontally on the webpage. 

What if you need  to align your text vertically? No problem! Just use the method? 

Example: Center Text Vertically With CSS Flexbox

 The CSS flexbox is a very flexible tool. It allows you to align your text vertically and horizontally.

Justify-content will align the text horizontally, while align-items will position the text vertically.

/* In HTML */ <h1 style="text-align: center;">How To Vertically Center Text</h1>
<div class="container">
  <div class="centered-element">
    <p>I'm learning how to align text on a webpage and I won't give up until I'm good at what I'm learning.</p>
    <p>I'm learning how to align text on a webpage and I won't give up until I'm good at what I'm learning.</p>
  </div>
</div>
.container {
  display: flex;
  align-items: center; /* align-items will position the text in the center vertically */
  height: 500px;
  justify-content: center; /* Justify-content will position the text in the center horizontally */
  margin: auto;
}

Example: Center Text Vertically With CSS Padding

This property controls the padding around an element. In this case, the padding value is set to a certain amount of pixels to vertically align the text.

<h1 style="text-align: center;">How To Vertically Center Text</h1>
<div class="container">
  <p>I'm learning how to align text on a webpage and I won't give up until I'm good at what I'm learning.</p>
  <p>I'm learning how to align text on a webpage and I won't give up until I'm good at what I'm learning.</p>
</div>
/*In CSS*/
.container {
  padding: 200px 0;
  text-align: center;
}

Other Text Alignment Properties

Alignment properties such as the text-indent and text-align-last could also be useful for your web projects.

Text-Indent

In CSS, the text-indent property specifies the indentation of the first line of each block of text. It uses both positive and negative values. 

<html>
  <head>
    <title>Right Text Alignment</title>
    <style>
      P {
        Text-indent: 30px;
      }
    </style>
  </head>
  <body>
    <p>I'm learning how to align text on a webpage and I won't give up until I'm good at what I'm learning.</p>
  </body>
</html>

 

Text-Align-Last

This property allows you to align the last line of a paragraph or a body of text. The values you can use for the property are: auto, left, right, center, justify, start, end, initial, and inherit.

<html>
  <head>
    <title>Right Text Alignment</title>
    <style>
      P {
        Text-align-last: center;
      }
    </style>
  </head>
  <body>
    <p>I'm learning how to align text on a webpage and I won't give up until I'm good at what I'm learning.</p>
  </body>
</html>

Want to know more about CSS? 

Learn more by taking Sololearn’s CSS course on working with text. With our CSS Course you’ll learn how to control the style and layout of websites.

Want to learn something else?  Sololearn offers courses on other tech skills  that might interest you.

References: 

Related blogposts