Search code examples
csshtml-listscentering

How to center this horizontal list of images?

In the following fiddle you see 3 images. I want to center the UL on the screen. It seems to be impossible for me. Can anybody help?

https://jsfiddle.net/dtnp5ko2/

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

UPDATE: Thank you Pangloss. Your codes center the UL on the screen. The images are not automatically placed on the same horizontal level. If I type some more text above 1 image, then that images shifts down. How to align the 3 images on the same horizontal level, exactly next to each other?

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

You can see the problem here: https://jsfiddle.net/dtnp5ko2/2/

Solution

  • Use display:inline-block instead of float:left, so it's easy to center the elements.

    Remove width="100%" from <img> tags, although it works in this case, because percentage width is relative to the container's width, and you have it defined on the <li>, but use CSS max-width:100% is a better choice to me, very maintainable.

    And you have an unclosed <li>, so fix that too.

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

    Edit: change vertical-align value from top to bottom to align the images to the bottom.