title: How to center image in <li> elements?
body: <p>I have a <code>ul</code> whose cells consist of an image and a text:</p>
  
  <pre><code>&lt;ul class="special_ul"&gt;
    &lt;li&gt;
      &lt;img src="img/solution_icon_optimize-efficnt.png"&gt;
      &lt;a href = ""&gt;OTT&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;img src="img/solution_icon_personal.png"&gt;
      &lt;a href = ""&gt;Cloud Computing&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;img src="img/solution_icon_diti-cx.png"&gt;
      &lt;a href = ""&gt;Managed Services&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;img src="img/solution_icon_biz-analitics.png"&gt;
      &lt;a href = ""&gt;Social Media&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>css:</strong></p>
  
  <pre><code>.special_ul li{
      padding-right: 10px;
      list-style-type: none;
      display: inline-block;
      text-align: center;
  }
  
  .special_ul li img , .special_ul li a{
      display:block;
  }
  </code></pre>
  
  <p>The problem is that the text is centered but the images are not:</p>
  
  <p><img src="https://i.stack.imgur.com/6DpdS.png" alt="ul"></p>
  
  <p><em>(i highlighted the list with the mouse so you can see the images are not in the center)</em></p>
  
  <p>How do I make the images centered (horizontally) as well?</p>