css ---用于演示风格---

Posted 2021-05-13

{"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: 4px;
  margin-right: 4px;
  /* Debug */
  background-color: rgba(200,200,100,0.5);
}
li {
  float: left;
  margin-bottom: 20px;
  width: 25%;
  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;
}

body {
  /*margin: auto;*/
  /*width: 640px;*/
}

img {
  vertical-align: middle;
}

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