如何使这个水平图像列表居中？答案

【问题标题】：How to center this horizontal list of images?如何使这个水平图像列表居中？
【发布时间】：2016-04-12 13:41:24
【问题描述】：

在下面的小提琴中，您会看到 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/

【问题讨论】：

标签： css html-lists centering

【解决方案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，以使图像与底部对齐。

【讨论】：