title: How can i center image in any div in HTML & CSS?
body: <p><a href="https://i.stack.imgur.com/oerwG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oerwG.jpg" alt="The Output"></a></p>
  
  <p>How can i center image in any div in HTML &amp; CSS ? </p>
  
  <p>I have a nav bar that uses images as links for other pages, the nav bar is multiple divs each has an image and anther div contains a words, how can I center this img in the div</p>
  
  <p>The CSS: </p>
  
  <pre><code>#Nav
  {           
    height:  150px; 
    margin-top: 50px;
  }
  #Nav ul
  {
    list-style-type: none;
    padding: 50px;
    padding-top: 0px;
    width: 100%;
  }
  #Nav li
  {
   float: left;
   font-size: 12px; 
   font-weight: bold; 
   letter-spacing: 0; 
   margin: 30px;
  }
  #Nav a
  {
   display: inline-block;
   padding: 5px;  
   width: 70px;
   height: 100px;
   color: black;
   text-decoration: none;
  }
  #Nav a:hover 
  {
   border: 2px solid #ddd;
   border-radius: 4px;
   box-shadow: 0 0 2px 1px rgba (0, 140, 186, 0.5);
  }
  #img img 
  {
   align-self: middle; 
   width: 50px;
   height: 50px;
  }
  #desc 
  {
   margin-top: 15px;
   text-align: center;
  }
  </code></pre>
  
  <p>The html: </p>
  
  <pre><code>&lt;li&gt; &lt;a target="_blank" href="#"&gt; 
  
            &lt;div id="img"&gt; &lt;img src="C:/Users/hp1/Desktop/Website/Pictures/Accessories.jpg" alt="Accessories"&gt;
  
              &lt;div id="desc"&gt; Accessories &lt;/div&gt; 
  
            &lt;/div&gt; 
  
   &lt;/a&gt; &lt;/li&gt;
  </code></pre>