html - 在UL中居中图像

我正在尝试将这些图像放在UL中。我已经看过其他一些主题，但是无法将解决方案应用于我的情况。如果有人可以帮助我，我将不胜感激。谢谢。

JSFiddle：https://jsfiddle.net/dvbL2d5y/1/

的HTML

<div id="posts-wrap">
    <div id="primary">
        <div class="hentry">
            <div class="entry-content">
                <div id="equipment-gallery">
                    <ul class="medium-grid">
                        <li>
                            <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
                        </li>
                        <li>
                            <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
                        </li>
                        <li>
                            <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
                        </li>
                        <li>
                            <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
                        </li>
                        <li>
                            <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
                        </li>
                        <li>
                            <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

的CSS

#posts-wrap {
  padding: 30px 50px;
  text-align: center;
}

ul.medium-grid {
  margin: 0 auto;
}

#equipment-gallery li {
  float: left;
  list-style: none;
  margin: 20px;
}

最佳答案

请在css下面申请。我已经删除了float属性，并引入了display：inline-block。

 #posts-wrap {
      padding: 30px 50px;
      text-align: center;
    }

    ul.medium-grid {
      margin: 0 auto;
    padding:0;
    }

    #equipment-gallery li {
      display: inline-block;
      list-style: none;
      margin: 20px;
    }