html - 在 UL 中居中​​图像

Question

我试图将这些图像置于 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;
}

Answer 1

请应用下面的 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;
    }