How can i center image in any div in HTML & CSS?

Question

How can i center image in any div in HTML & CSS ?

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

The CSS:

#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;
}

The html:

<li> <a target="_blank" href="#"> 

          <div id="img"> <img src="C:/Users/hp1/Desktop/Website/Pictures/Accessories.jpg" alt="Accessories">

            <div id="desc"> Accessories </div> 

          </div> 

 </a> </li>

Answer 1

You need to change your CSS for image like below:-

#img img 
{
 display: block;
 margin: 0 auto;
}

You can see Many Demos Here-