title: HTML: How do i center align an image inside an <li> tag
body: <p>I want to center an image inside a tag how do i do it? the image is placed on the extreme left on the screen but i want it to be in the center of the screen without sticking to the left. here is my html:</p>
  
  <pre><code>&lt;div class="sequence-slider"&gt;
    &lt;div id="sequence"&gt;&lt;i class="sequence-prev icon-angle-left"&gt;&lt;/i&gt; &lt;i class="sequence-next icon-angle-right"&gt;&lt;/i&gt;
      &lt;ul class="sequence-canvas"&gt;
  
        &lt;!-- Sequencejs Slider Single Item --&gt;
        &lt;li&gt;
  
          &lt;img class="main-image" src="photo/fac2.jpg" alt="Image" /&gt; 
  
        &lt;/li&gt;
  
        &lt;!-- Sequencejs Slider Single Item --&gt;
        &lt;li&gt;
  
          &lt;img class="main-image" src="photo/fac1.jpg" alt="Image" /&gt; 
  
        &lt;/li&gt;
  
        &lt;!THIS IMAGE STICK TO THE LEFT BUT I WANT IT IN THE CENTER&gt;
        &lt;li&gt;
          &lt;img class="main-image" src="photo/slide3.png" alt="Image" style ="width: auto;
    height : auto; " /&gt; 
  
        &lt;/li&gt;
  
      &lt;/ul&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/21f2A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/21f2A.png" alt="enter image description here"></a></p>