How to Center a List in HTML

In this article, we are going to see how to center a list in HTML. Before that, you need to know a little about the list.

What is list

The list means an order of points. The <li> is the main tag to create seperate list. There are two types of lists, They are:

• Unordered list – The <ul> tag represents an unordered list and if we use this we can’t count the points.
• Ordered list – The <ol> tag represents an ordered list and by using this we can count points easily. If you use this, numbers will come as default.

To know more about the list – Click here

How to center a list

<center>
<ul>
<li>C</li>
<li>C++</li>
<li>JAVA</li>
<li>PYTHON</li>
<li>JAVASCRIPT</li>
</ul>
</center>

unexpected output:

In the above code, we have an unordered list with 5 list items. If you use the <center> tag to center it, the output will look like the above. That means the bullet points are displayed on the left and only texts are displayed in the center as the center tag only works for text. So, we can solve this problem using only CSS properties.

CSS:

ul{
display: table;
margin: 0 auto;
}

expected output: In the above CSS, we styling for unordered list firstly we use the “display” property and give it value as “table”. Then we set the margin to “0 auto” for <ul> tag. So, see the above-given output the all unordered list will display centered with bullet points.

Conclusion

We can use this method for both unordered and ordered list.