Question

在下面的小提琴中，您会看到3张图片。我想把UL放在屏幕上。对我来说似乎不可能。有人可以帮忙吗？

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

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

更新：谢谢Pangloss。您的代码将UL置于屏幕中心。图像不会自动放置在同一水平面上。如果我在1张图像上方输入更多文字，那么这些图像会向下移动。如何将3幅图像对齐在同一水平面上，彼此完全相邻？

{{1}}

您可以在此处查看问题： https://jsfiddle.net/dtnp5ko2/2/

Answer 1

使用display:inline-block代替float:left，因此很容易使元素居中。

从width="100%"代码中删除<img>，虽然它适用于这种情况，因为百分比宽度相对于容器的宽度，并且您已在<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，将图片对齐到底部。

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

1 个答案: