CSS - div 안에 p태그 align

div into p tag align

div 태그 안에 p태그를 vertical-align: middle로 맞추고 싶을 때가 있는데… 그럴 때에는 아래와 같이 하면 된다.

<div className="view">
  <p>{content.title}</p>
</div>

.view {
  /* div(view)도 display: inline-block으로 한 줄에 정렬되어 있다. */
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 11px);
  padding: 7px 7px 7px 0;
  min-height: 60px;
}

p { /* 포인트! */
  height: 50px;
  display: table-cell;
  vertical-align: middle;
}