• 웹표준으로 문서를 작성하면 텍스트의 가로정렬은 문제없이 되나 세로정렬이 잘 안되는 경우가 발생한다.
• 세로정렬은 vertical-align: middle;로 사용한다.
• 두개의 div태그를 사용하여 세로 정렬한다.
• 첫번째 div태그(레이아웃) css속성에 display: table 설정한다.
• 두번째 div태그(내용) css속성에 display: table-cell; vertical-align: middle; 로 설정한다.

Example code

CSS

#head {
  display: table;
  height: 50px;
  border: 1px solid red;
}
#h_con {
  display: table-cell;
  vertical-align: middle;
  padding-left: 10px;
}

HTML

<div id="head">
  <div id="h_con">
    <a href="#"><img/></a>
  </div>
  <div id="h_con">
    <a href="#"><img/></a>
  </div>
  <div id="h_con">
    <a href="#"><img/></a>
  </div>
</div>

• 서로 세로 사이즈가 다른 이미지 같은 경우에는 내용 div 태그를 따로 둬야한다. display: table-cell 속성이 table의 td와 같은 성격을 가지고 있어서 영역을 딱맞게 채운다.
• 레이아웃 div를 중앙정렬 하려면 레이아웃 div를 싸고있는 태그의 속성을 text-align: center;로 주고, 레이아웃 div속성은 margin: 0 auto;를 추가한다.
• ie7에서는 display: table과 display: table-cell속성이 지원되지 않아 ie7을 꼭 지원하려면 핵이나 다른 방법으로 처리한다.