Cacher is the code snippet organizer for pro developers

{"view":"split-vertical","fontsize":"140","seethrough":"","prefixfree":"1","page":"css"}

// alert('Hello world!');

<ul class="clearfix">
  <li><img src="http://placehold.it/126/126"></li>
  <li><img src="http://placehold.it/126/126"></li>
  <li><img src="http://placehold.it/126/126"></li>
  <li><img src="http://placehold.it/126/126"></li>
  <li><img src="http://placehold.it/126/126"></li>
  <li><img src="http://placehold.it/126/126"></li>
  <li><img src="http://placehold.it/126/126"></li>
  <li><img src="http://placehold.it/126/126"></li>
  <li><img src="http://placehold.it/126/126"></li>
  <li><img src="http://placehold.it/126/126"></li>
  <li><img src="http://placehold.it/126/126"></li>
</ul>

ul {/* ブロックな要素かつ幅を持っていれば、marginの左右をautoにすることで、中央寄せにできる。 */
  margin-left: auto;
  margin-right: auto;
  width: 632px;
  /* Debug */
  background-color: rgba(200,200,100,0.5);
}

/* 158 * 5 = 790 */
@media (min-width: 791px) and (max-width: 948px) {
  ul {
    width: 790px;
  }
}

/* 158 * 6 = 948 */
@media (min-width: 949px) and (max-width: 1106px) {
  ul {
    width: 948px;
  }
}

/* 158 * 7 = 1106 */
@media (min-width: 1107px) {
  ul {
    width: 1106px;
  }
}

li {
  float: left;
  margin-bottom: 20px;
  width: 158px;
  text-align: center; /* 中のimg要素はインラインブロックな要素なので、親要素がtext-align:centerをすると、中央に寄る */
  /* Debug */
  outline: 1px solid rgba(200,50,50,0.9);
}

/* --- for demo style --- */
* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

h1 {
  margin: 30px;
}

img {
  vertical-align: middle;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}