Как выровнять картинку внутри по центру?
Решение с флексами для картинок разного размера: codepen.io/anon/pen/RRQWpQ
Варианты:
по горизонтали:
1. text-align:center для li
2. img {
display:block;
margin: auto;
}
3. flex
По вертикали: 
1. либо через display table
2. через absolute и relative и нолики по всем сторонам и margin
3. проще всего через flex'ы
P.S.
1. Инлайн-блок правильно пишется вот так: display: inline-block;
2. Есть классные теги для окружения картинки: figure и figcaption
Можно через display: table-cell; либо Flexbox