Интервал в тегах с отображением ячейки таблицы ⇐ CSS

[Anonymous]

У меня есть четыре тега li, и все они содержат изображения. Теперь я хочу отображать изображения по центру по вертикали, и для этого я использовал display: table-cell для всех li, а для изображений я использовал вертикальное выравнивание: middle. Но поле не работает, когда я пытаюсь поставить интервал между li.

Код: Выделить всё

.achievements ul {
margin: 0;
padding: 0;
list-style: none;
}

.achievements ul li {
min-width: 304px;
min-height: 208px;
vertical-align: middle;
display: table-cell;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-shadow: 0px 0px 3px #aaa;
color: #000;
margin-right: 14px;
padding-bottom: 32px;
max-width: 303px;
background: #fff;
font-family: 'gafata';
padding-top: 32px;
line-height: 23px;
text-align: center;
}

.achievements ul li img {
vertical-align: middle;
}

Код: Выделить всё

Our Achievements

[list]
[*]
[img]https://placehold.co/250x50[/img]

[*]
[img]https://placehold.co/250x50[/img]

[*]
[img]https://placehold.co/250x50[/img]

[*]
[img]https://placehold.co/250x50[/img]

[/list]

Подробнее здесь: https://stackoverflow.com/questions/236 ... table-cell