[해피CGI][cgimall] Display flex를 이용한 컨텐츠 세로중앙정렬

일전에 세로 가운데정렬에 대한 자료를 올렸지만 이번에는 display:flex를 이용한 세로 가운데 정렬을
할수 있는 방법입니다.

display:flex 속성을 가진 영역 안의 컨텐츠의 정렬방법을 align-self: center; -webkit-align-self: center; 를
이용하면 가로크기에따라 세로 중앙에서부터 채워지는것을 확인할 수 있습니다.



줄이기전

 

 

줄인후




사용법은 아주 간단합니다.

<div style="display:flex">
    <span style="align-self: center; -webkit-align-self: center;">
         텍스트가 늘어나도 가운데부터 정렬이되여 화면상에 보여줍니다. 텍스트가 늘어나도 가운데부터 정렬이되여 화면상에 보여줍니다.
    </span>
</div>


하위버전의 브라우저에서는 지원이되지 않기때문에 사용상에 제약이 있지만 모바일이나 상위버전에만 작업을 할경우에는
유용합니다 ^^

위속성이외에도 Flex를 이용한 다양한 레이아웃 및 속성들이 있으니 다양하게 찾아서 이용해보시길 바랍니다 ^^
첨부 파일을 다운 받으시면 예제를 확인하실 수 있습니다.