центр изображения литиево элемента

Question

У меня есть ul чьи клетки состоят из изображения и текста:

<ul class="special_ul"> 
    <li> 
    <img src="img/solution_icon_optimize-efficnt.png"> 
    <a href = "">OTT</a> 
    </li> 
    <li> 
    <img src="img/solution_icon_personal.png"> 
    <a href = "">Cloud Computing</a> 
    </li> 
    <li> 
    <img src="img/solution_icon_diti-cx.png"> 
    <a href = "">Managed Services</a> 
    </li> 
    <li> 
    <img src="img/solution_icon_biz-analitics.png"> 
    <a href = "">Social Media</a> 
    </li> 
</ul> 

CSS:

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

Проблема в том, что текст центрируется но изображений нет:

(я выделен список с помощью мыши, так что вы можете увидеть изображения не в центре)

Как сделать изображение по центру (по горизонтали), а?

Answer 1

Сделайте блоки по центру.

.special_ul li img, .special_ul li a{ 
    display:block; 
    margin:0 auto; 
}