div 에 vertical-align : center 적용하는 방법

div 에 vertical-align : center 적용하는 방법

vertical-align 은 table 태그에서만 작동을 한다
예전에는 table 을 많이 썼지만 요즘은 거의 다 div 로 하다보니
이 세로정렬 안 되는게 골치아플때가 많다

이를 해결하는 가장 쉬운방법은 css3 의  display:flex; 를 이용하는 것이다

https://stackoverflow.com/questions/18649106/div-vertical-align-middle-css  의 끝부분 26 부분을 참조하면

div 내부에 d아래 css 를 추가하면 된다.

display:flex;
align-items:center; 

가로 정렬을 원하면

justify-content:center; 까지 사용하면 되고

예를들면..

<div class="vertical-align-content">
  Hodor!
</div>

의 경우 css 를

.vertical-align-content {
  background-color:#f18c16;
  height:150px;
  display:flex;
  align-items:center;
  /* Uncomment next line to get horizontal align also */
  /* justify-content:center; */
}

이렇게 주면 된다.

 

 

flex 형태에 대해 조금 더 정확히 알고프면
https://joshuajangblog.wordpress.com/2016/09/19/learn-css-flexbox-in-3mins/   사이트를 참고로 하면 된다

CSS3 라는게 이제는 거의 일반화 되었기에 큰 무리 없이 사용가능하다
( IE6,7,8 따위는 이제는 그냥 무시하는게 더 낫다 )