How To Align List in Centre Using only HTML

How To Align List in Centre Using only HTML

Last Updated : 07 Jun, 2025

Centering a list on a webpage is a common design need. Usually, this is done using CSS, but sometimes you might want to center a list using only HTML without any CSS. Using HTML, we will show you easy ways to align a list in the center.

Centering a List Item

Here, we are centering a list of items, not a list. Below are some methods:

Method 1: Using the <center> Tag

We can wrap our content around the center tag, which centers our unordered list.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
</head>

<body>
    <center>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </center>
</body>

</html>

Note: We can also use the <center> tag inside each list item to center the particular list item, but this method is not common and can make the HTML messy.

Method 2: Add align="center" to a container

As <center> tag was decrepicated in HTML 5, so we can use align attribute to make out ordered list center. To do this, first we need to make sure our list wrap into a container and we set align = center in that div/container as example below.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
</head>

<body>
    <div align="center">
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ol>
    </div>
</body>

</html>

Centering a List Within a Container (Recommended)

list

To Center a Whole List, there is not direct method in HTML, we need to use CSS to do so. Here, you can check this article on center a list using css.

How To Align List in Centre Using only HTML

R

riyaya88s

Improve

Article Tags :

Similar Reads

How to Create an Unordered List in HTML ?

An unordered list in HTML is a collection of items displayed with bullet points. To create an unordered list, we can use the <ul> tag to start the list and <li> tags for each items. Unordered lists are usually displayed with bullet points. Syntax<ul> <li>apple</li> <

How to create a table row using HTML?

Define a row in a table by using a <tr> tag in a document. This tag is used to define a row in an HTML table. The tr element contains multiple th or td elements. Syntax:<tr> ... </tr>Example: In this example, a table row in HTML5, utilizes the <tr> tag within the <tbody

How to Align Items to End Position using CSS ?

To align elements to the end, you can use the CSS property justify-content: flex-end; in a flexbox container, and for aligning elements to the end vertically, you can use the CSS property align-items: flex-end; in a flexbox container. This property aligns the flex items along the cross-axis (vertica

How to Center an Image in HTML?

To Center an image in HTML is a common task in web design, and there are several modern ways to do it using CSS. While the old <center> tag was once popular, it's now deprecated in HTML5. Today, nearly 80% of websites use CSS techniques like text-align, margin: auto, or flexbox to center image

How to create Right Aligned Menu Links using HTML and CSS ?

The right-aligned menu links are used on many websites. Like hotels website that contains lots of options in the menu section but in case of emergency to make contact with them need specific attention. In that case, you can put all the menu options on the left side of the navigation bar and display

How to Align Form Elements to Center using Tailwind CSS?

Form elements are parts of a webpage that let users enter information. They include things like text boxes, checkboxes, radio buttons, dropdown menus, and buttons. To center form elements using Tailwind CSS, use classes like flex, items-center, and justify-center on a parent container.These are the

How to Align Two Div's Horizontally using HTML ?

In this article, we will learn about aligning 2 divs beside each other in HTML. The <div> tag is a block-level element i.e. it always starts on a new line and takes all the width available to both left and right sides. It also has a top and a bottom margin.Â The <div> tag is used to separ

How to Align Navbar Items to Center using Bootstrap 4 ?

Aligning navbar items to the center using Bootstrap refers to the practice of positioning navigation links in the middle of the navigation bar for a balanced and aesthetic design. Bootstrap's utility classes make it easy to implement this alignment responsively and efficiently.There are some common

How to Align Right in a Table Cell using CSS ?

Aligning right in a table cell means positioning the content of the cell to the right side. In CSS, this can be achieved by applying the text-align property to the table cell or using the td selector.Align right in a table cell Using text-align propertyTo align the contents of a table cell to right,

How to Center a Video in HTML ?

Centering a video in HTML enhances the user interface, offering a cleaner and more organized appearance. We can achieve this effect with two different methods, by using the Flexbox and the "style" attribute. Below are the approaches to Center a Video in HTML: Table of Content Using the FlexboxUsing