[css] display:table-cell;을 이용한 갤러리 만들기

<div id="gallery">
  <div class="gallery_title">
    <h2>갤러리</h2>
  </div>
  <ul>
    <li>
      <a href="">
        <span><img src="https://via.placeholder.com/182x50"></span>
        <p>on sunday의 갤러리 만들기 on sunday의 갤러리 만들기</p>
      </a>
    </li>
    <li>
      <a href="">
        <span><img src="https://via.placeholder.com/160x50"></span>
        <p>on sunday의 갤러리 만들기 on sunday의 갤러리 만들기</p>
      </a>
    </li>
    <li>
      <a href="">
        <span><img src="https://via.placeholder.com/100x100"></span>
        <p>on sunday의 갤러리 만들기 on sunday의 갤러리 만들기</p>
      </a>
    </li>
  </ul>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul,li {
  list-style: none;
}

a {
  text-decoration: none
}

#content_box {
  height: 400px;
  background-color: slategray;
}

#gallery {
  width: 580px;
  height: 230px;
}

.gallery_title {
  height: 45px;
  border-bottom: 1px solid #dfdfdf;
  margin-bottom: 20px;
}

.gallery_title h2 {
  line-height: 1;
  height: 45px;
  display: inline-block;
  border-bottom: 2px solid green;
  font-size: 20px;
  color: #444;
  padding-right: 10px;
  overflow:hidden;
}

#gallery ul li {
  float: left;
  width: 184px;
}

#gallery ul li+li {
  margin-left: 12px;
}

#gallery ul li a {
  display: block;
}

#gallery ul li a span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 184px;
  height: 125px;
  border: 1px solid #dfdfdf;
}

#gallery ul li a p {
  width: 100%;
  font-size: 13px;
  color: #444;
  margin-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#gallery ul li a span에 display:table-cell을 주지 않을 경우 이미지 가운데 정렬이 되지 않습니다.

#gallery ul li a p에 글이 너무 많을 때 width값을 넘어가는 글은 말줄임표로 나타내기 위해

overflow: hidden; text-overflow: ellipsis;  white-space: nowrap; 속성을 입력해줍니다.

 

 

table-cell을 사용하지 않을 경우 이미지를 수직수평 정렬하는 방법↓

#gallery ul li a span {
  position:relative; 
  display:inline-block;
  width: 184px;
  height: 125px;
  border: 1px solid #dfdfdf;
}

#gallery ul li a span img {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  max-width:100%;
  max-height:100%;
}

position과 transform을 이용하여 가운데로 오도록 합니다.