**Part of the Series: **How To Build a Website With HTML

This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Having a knowledge of how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

Aligning your content to the center, left, or right can be useful for arranging content on your page. In this tutorial, we’ll learn how to align text using HTML.

To align text on a webage, we can use the style attribute and the property text-align.

For example, the following code snippet would center the text “Sample text”:

<p style="text-align:center;">Sample text</p>

Copy

To align your HTML content to the left or right, you would replace center with left or right.

In this tutorial, we’ll go through the process of using the text-align property to center the images and text in the top section of our webpage as illustrated in our demonstration website.

To center this content, we’ll add the text-align property to the <div> element that contains the background image, profile image, title, subtitle, and link in the top section of the homepage.

Locate this <div> element in your index.html file and add the highlighted text like so:

...
<!--First section-->
<div style="background-image: url('https://html.sammy-codes.com/images/background.jpg');
background-size: cover;; height:540px; text-align: center;">
<img src="https://html.sammy-codes.com/images/small-profile.jpeg" style="height:150px; border-radius: 50%; border: 10px solid #FEDE00; margin-top:80px;">
<h1 style="font-size:100px; color:white; margin:10px;">Sammy the Shark</h1>
<em>
<p style="font-size:30px; color: white;"> Senior Selachimorpha at DigitalOcean </p>
</em>
<p style="font-size: 20px; color:#1F9AFE;">
    <a href="Webpage FilePath";> About this site </a>
    </p>
</div>
...

Only copy and add the highlighted text-align attribute as other parts of this HTML code will not be specific to your project. Save your file and reload it in the browser. You should receive something like this: