title: li not aligning in center to ul
body: <p>In the following code, I am struggling to align the li HELLO exactly in the center of the ul But it's getting shifted to the left side. Here, I am not looking for a solution (as I am trying to practice and understand the functionality through this code). But I am most importantly looking for a reason and explanation as to why is this happening.</p>
  
  <p>Even though I have set the left/right margin of the li to auto. Then why is it not coming in the center of the ul ? For visual aid, I have created border for li so that you can easily spot it's exact position. I know that by decreasing/altering the width of the ul , this problem can be corrected. But is there no other way so that the text is aligned in the center automatically (without manually adjusting width,padding etc)? Also if I increase the length of the text or change its font size I want the text to be aligned in the center.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html body {
   height: 100%;
   width: 200px;
  }
  
  ul {
   background-color: rgba(0,0,0,1);
   height: 100px;
   width: 150px;
  }
  
  li {
   color: rgba(255,255,255,1);
   margin-right: auto;
   margin-left: auto;
   list-style-type: none;
   width: 50px;
   text-align: center;
   border: thin solid rgba(255,255,255,1);
   float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
  &lt;li&gt;Hello&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>