如何将这个水平图像列表居中？

Question

在下面的 fiddle 中，您会看到 3 张图片。我想让 UL 在屏幕上居中。这对我来说似乎是不可能的。有人可以帮忙吗？

.loc-caption:before {
  content: attr(title);
  display: block;
}

<ul>
  <li style="float: left;width: 25%;list-style-type:none;" class="loc-caption" title="location 1">
    <img id="loc1" src="http://design-boxsprings.nl/beeld-matrl/locatie-showroom.jpg" width="100%"/>
  </li>
  <li style="float: left;width: 25%;list-style-type:none;" class="loc-caption" title="location 2">
    <img id="loc2" src="http://design-boxsprings.nl/beeld-matrl/locatie-kantoor.jpg" width="100%"/>
  <li style="float: left;width: 25%;list-style-type:none;" class="loc-caption" title="location 3">
    <img id="loc3" src="http://design-boxsprings.nl/beeld-matrl/locatie-magazijn.jpg" width="100%"/>
  </li>
</ul>

更新：谢谢 Pangloss。您的代码在屏幕上将 UL 居中。图像不会自动放置在同一水平面上。如果我在 1 张图像上方键入更多文本，则该图像会向下移动。如何将 3 张图像对齐在同一水平面上，并紧挨着？

    <ul>
  <li class="loc-caption" title="location 1: office and warehouse ">
    <img id="loc1" src="http://design-boxsprings.nl/beeld-matrl/locatie-showroom.jpg" />
  </li>
  <li class="loc-caption" title="location 2">
    <img id="loc2" src="http://design-boxsprings.nl/beeld-matrl/locatie-kantoor.jpg" />
  </li>
  <li class="loc-caption" title="location 3">
    <img id="loc3" src="http://design-boxsprings.nl/beeld-matrl/locatie-magazijn.jpg" />
  </li>
</ul>

你可以在这里看到问题： https://jsfiddle.net/dtnp5ko2/2/

Answer 1

使用 display:inline-block 而不是 float:left，因此很容易将元素居中。

从 <img> 标签中删除 width="100%"，尽管在这种情况下它有效，因为百分比宽度是相对于容器的宽度，并且您已在 <li> 上定义了它，但是使用 CSS max-width:100% 对我来说是更好的选择，非常易于维护。

而且你有一个未关闭的<li>，所以也修复它。

.loc-caption:before {
  content: attr(title);
  display: block;
}

ul {
  text-align: center;
  padding: 0;
}

li {
  width: 25%;
  display: inline-block;
  vertical-align: top;
}

li img {
  max-width: 100%;
  height: auto;
}

<ul>
  <li class="loc-caption" title="location 1">
    <img id="loc1" src="http://design-boxsprings.nl/beeld-matrl/locatie-showroom.jpg" />
  </li>
  <li class="loc-caption" title="location 2">
    <img id="loc2" src="http://design-boxsprings.nl/beeld-matrl/locatie-kantoor.jpg" />
  </li>
  <li class="loc-caption" title="location 3">
    <img id="loc3" src="http://design-boxsprings.nl/beeld-matrl/locatie-magazijn.jpg" />
  </li>
</ul>

编辑： 将 vertical-align 值从 top 更改为 bottom 以使图像底部对齐。

如何将这个水平图像列表居中？

How to center this horizontal list of images?

css

html-lists

centering