vertical-align 문제

section 안에 사각형 div를 우겨넣는 문제인데, vertical align을 사용해서 풀어야했다.

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

section {
  width:200px;
  height:200px;
  border:10px solid red;
  font-size: 0; 
  text-align: center;
}
section > div {
  width:50%;
  height:50%;
  background-color:black;
  display: inline-block; 
  vertical-align: middle; 
}
section > div:nth-child(2) {
  background-color:green;
}
section > div:nth-child(3) {
  background-color:pink;
}
section > div:nth-child(4) {
  background-color:gold;
}

이렇게 해결했고 vertical align은 inline과 inline-box에서 사용할 수 있다는 것을 보고 이래저래 계속 바꾸다가 나중에 폰트 사이즈 때문에 안들어간다는 것을 알았다. 암튼 수업 마칠 때 까지 풀지 못했었던 문제가 이 문제다.