css) div박스안 텍스트 수직 정렬, 블럭요소 태그들-h4, span 수직 정렬

 

vertical-align:middle; 

 

전에도 헤맸던 부분인데

[ html ]
    <!-- 오늘의 발견 섹션 영역 -->
    <section>
      <div class="title">
        <h4>오늘의 발견</h4>
        <span class="line" aria-hidden="true">|</span>
        <p>오늘 쿠팡이 엄선한 가장 핫한 제품</p>
      </div>
    </section>
    <!-- // 오늘의 발견 섹션 영역 -->
    
[ css ]
.title h4,
.title p {
  display: inline;
  vertical-align: middle;
}

 

 vertical-align: middle 을 .line, .title p 에 주어서 css가 안먹혔다. 

h4, p는 블럭요소라 inline을 주었고 그곳에서 수직정렬을 해야한다.

 

 

만약 div로 텍스트를 감싼 경우라면 display:table-cell; 과  vertical-align: middle 을 같이 쓰면된다.