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

Answer 2

我修改了你的代码。我希望它有所帮助。如果要在text-align：center标记的帮助下将其居中，则只需要为元素添加内联块。

#posts-wrap {
  padding: 20px;
  text-align: center;
}

ul.medium-grid {
  display:inline-block;
  margin:0;
  padding:0;
}

#equipment-gallery li {
  float: left;
  list-style: none;
  margin: 20px;
}

<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>

Answer 3

这是你在找什么？

#equipment-gallery li {
  float: left;
  list-style: none;
  margin: 0 auto;
  display: block;
  width: 100%;
}

Answer 4

从此类“＃equipment-gallery li”中删除“float：left”并添加“display：inline-block”

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

Answer 5

Functor

你可以看到链接fiddler添加这个css https://jsfiddle.net/zdso82b7/1/

Answer 6

为了调整中心，我在ul标签中使用了flexbox概念

 ul.medium-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: wrap row;
}

有关弹性框的更多详细信息，请参阅CSS-Tricks A Complete Guide to Flexbox

#posts-wrap {
  padding: 20px;
  text-align: center;
}

ul.medium-grid {
  display: flex;
  justify-content: center;
  flex-flow: wrap row;
}

#equipment-gallery li {
  float: left;
  list-style: none;
  margin: 20px;
}

<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>

在UL中居中图像

6 个答案: