How to align bullet points in an unordered list in the center using inline CSS

Question

Trying to align the bullet points in an unordered list in the centre of the page using inline CSS but it is not working.

I have tried using 'text-align:center;' and 'list-style-position: inside;'

 <div style="text-align:center; list-style-position: inside;"> <ul> <li> blah </li> <li> blah rujrij32itjo2jtij32ijti42jtij24tji4jtij2 b32ru h13ru3r31tt</li> </ul> </div>

The text and the bullet points go to the center but the bullet points do not align underneath each other.

I'm trying to code the following project from freecodecamp: https://codepen.io/freeCodeCamp/full/zNqgVx

Answer 1

I believe the result you're after is achieved by changing the list's display to inline-block and then setting the text-align to left

 ul { display: inline-block; text-align: left; } div { text-align: center; }

 <div> <ul> <li> blah </li> <li> blah fdsf ds fds fdsf s</li> </ul> </div>