How to center alignment text in your webpage with CSS


If you’re new to front-end development, the disparity between what a simple HTML document produces in your browser and the reality of what a modern website looks like can seem overwhelming.

One of the first things you might notice is that all of your HTML text is aligned to the left of your webpage by default. While there isn’t a convenient way to center your text in HTML, there is a CSS property that can do this easily.

In this tutorial article, you will learn how to center text on web pages using CSS.

What is the CSS Text-Align property?

The CSS text-align property is a CSS feature used to organize text on a web page. This property can be assigned one of several values ​​depending on the layout you want to achieve on your web page. The CSS text-align property frequently receives the following values.

Related: Align Things With CSS Text Align Property

  • Left (aligns text to the left of a web page and is also the default alignment)

  • Right (aligns text to the right of a web page)

  • Center (aligns text to the center of a web page)

  • Justify (ensures that each line of text has the same width)

Center alignment text on a web page

Since most languages ​​read left to right, aligning text to the left of a web page by default is handy. However, there will be cases where aligning text in the center is a more practical approach (like headings and subheadings).

VIDEO OF THE DAY MAKEUSE

Simple HTML web page example






Center Alignment




Heading


Lorem ipsum, dolor sit amet consectetur adipisicing


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?




Heading


Lorem ipsum, dolor sit amet consectetur adipisicing


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?






The above HTML file will generate the following web page in your browser.

html-default-output-1

As you can see from the output above, all text is left aligned. There are several methods you can use to center the above text, but first you need to identify the text you want to center.

If the goal is to align all the text on your web page in the center, the following code will achieve this.

Example of aligning all text in the center


.container{
text-align: center;
}

The CSS code above uses a class property to target all text on the web page, and this is only possible because there is a parent tag.

with a container class encompassing all the text on the web page. The code will produce the following output in your browser.

center-align-all-elements

As you can see, all the text on the web page is now center aligned. The only problem is that the paragraph would look better and more readable if it was left aligned. In cases where you only want to center part of the text on a web page, you can use HTML elements as selectors instead of classes and identifiers.

Related: How to Target Part of a Webpage Using CSS Selectors

Example of specific center alignment text


h1, h3{
text-align: center;
}

The above code targets only the h1 and h3 elements on a web page and will produce the following output in your browser.

center-align-specific-elements

Center the alignment of a div on a web page

Another trend that you might notice among modern websites is that the text doesn’t go all the way to the edges. This is one of the cases where the parent div is used. Although there is no div align property in CSS, the margin property can be used to center align a parent div and its contents.

Example of center alignment division


.container{
max-width: 920px;
margin: auto;
}

The above code does several things. First, it assigns width to all content on the webpage, using the class of the parent div. You should always use the max-width property instead of the width property when placing website content in containers, as this makes it easier to be responsive by setting a maximum width instead of a fixed width.

The code above also uses the margin property to place the parent div in the center of the web page, producing the following output in the browser.

center-align-div

As you can see in the image above, the width of the text has been reduced to 920px, and the invisible container with the text is now in the center of the web page thanks to the margin property.

How does margin ownership work?

The margin property can be assigned a combination of three different values. When four values ​​are assigned to the CSS property, each value will target one of the four sides of an HTML element.

When two values ​​are assigned to the margin property, the first value will target the top and bottom sides of the HTML element and the second value will target the left and right sides of the HTML element.

In the example above, the margin property has only one value, which means that it targets the left and right sides of the HTML element (which in this case is the parent

label).

The margin property is usually assigned values ​​that are in the unit of pixels or, as in the example above, the auto value. The auto value ensures that the margin used on each side of the HTML element is equal. This effectively places the parent div element (and by extension the text) in the center of the webpage, giving you a layout that reflects modern webpages.

What you can do now

This tutorial article teaches you several things:

  • How to use the text-align property to center text on a web page.

  • How to center align different groups of texts surrounded by

    tags or other HTML elements.
  • How to center a group of text using the margin property on a parent div.

  • However, this is only the tip of the iceberg when it comes to CSS tools that can be used to organize your website layout. One of the most popular CSS properties that can be used to specifically map the structural layout of your web page (including center text alignment) is CSS Grid.

    CSS Grid provides a two-dimensional (rows and columns) layout structure for your web pages, with a framework that is easy to learn and use.


    CSS grid layout structure

    Learn how to create two-dimensional websites with CSS grid

    Web design with CSS has evolved. It’s time to learn how to create two-dimensional web pages with CSS grid.

    Read more


    About the Author


Comments are closed.