Trying to place my bullet points in the middle of page while making list left-align

Question

Trying to center my bullet points in the middle of the page while left-aligning my list. Right now, my list is looking like this.

HTML

<ul style="list-style-type:none;">
  <li><b>exercitation :</b> consectetur adipiscing elit</li>
  <li><b>minima :</b> aliquip ex ea commodo consequat</li>
  <li><b>commodi consequatur:</b> magni dolores eos</li>
</ul>

CSS

ul {
  text-align: center;
  list-style-position: inside;
}

Run the code snippet below.

ul {
  text-align: center;
  /* When I center this it looks like this whereas I want this in the middle but I want it to be centered and left-align. How do I achieve this? */
  list-style-position: inside;
}

li {
  /* text-align: left; */
}

<ul style="list-style-type:none;">
  <li><b>exercitation :</b> consectetur adipiscing elit</li>
  <li><b>minima :</b> aliquip ex ea commodo consequat</li>
  <li><b>commodi consequatur:</b> magni dolores eos</li>
</ul>

Answer 1

Set text-align: center; on the container of the list (in this case - body), display the list as an inline-block, and align the contents of the list to the left.

body {
  text-align: center;
}

ul {
  display: inline-block;
  list-style-position: inside;
  text-align: left;
}

<ul style="list-style-type:none;">
  <li><b>exercitation :</b> consectetur adipiscing elit</li>
  <li><b>minima :</b> aliquip ex ea commodo consequat</li>
  <li><b>commodi consequatur:</b> magni dolores eos</li>
</ul>

Answer 2

You can manage by adding parent block to ul and margin: auto; will sets margin based on available width, please find below code snippet:

ul {
  text-align: left;
  list-style-position: inside;
}

.parent {
    text-align: center;
    margin: auto;
    width: 80%;
}

<div class="parent">

  <ul>
      <li><b>exercitation :</b> consectetur adipiscing elit</li>
      <li><b>minima :</b> aliquip ex ea commodo consequat</li>
      <li><b>commodi consequatur:</b> magni dolores eos</li>
  </ul>
    
</div>