How to put list bullet points to center

Question

I was just practicing how to code in html and I'm having a difficult time finding a way to put the bullet points of lists in HTMLI.

so here is a sample of an ordered list that I did. When I tried using "center" and "list-style-position: center" it worked only on the text but it didn't affect the bullets. BTW I'm doing this in notepad++. Is there a way to achieve this with only using notepad++?

<ol>
    <li>fish</li>
    <li>eggs</li>
    <li><font face="arial" color="magenta">beefy</font></li>
    <li>chicken</li>
    <li>pork</li>
</ol>

Answer 1

There is a way to solve this by either using inline CSS in the HTML or by external CSS file.

Solution: The HTML code will remain as is and just adding some style to ol tag:

ol {
        text-align: center;
        padding-left: 0;
        list-style-position: inside; 
    }

<ol>
    <li>fish</li>
    <li>eggs</li>
    <li><font face="arial" color="magenta">beefy</font></li>
    <li>chicken</li>
    <li>pork</li>
</ol>

Explanation: The given solution answers the issue as:

1. text-align: center - style helps to center the text in the list
2. padding-left: 0 - removes the default padding of the list
3. list-style-position: inside - centers the bullet points (or numbers) with the list items

Maintaining these style rules, you can easily put bullet points in center for both ordered and unordered list. This will solve your problem.