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

[Anonymous]

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

Вот JSFiddle

HTML


Our Achievements

• 
• 
• 
• 

CSS

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


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