일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- #이미지
- #솔루션
- #웹솔루션
- CSS
- 솔루션
- 게시판
- happycgi
- #업종별
- #image
- #CSS
- #쇼핑몰
- 쇼핑몰
- #cgimall
- jquery
- 웹솔루션
- #해피CGI
- javascript
- php
- 해피씨지아이
- 사이트제작
- #jQuery
- #동영상
- #홈페이지
- 해피CGI
- #뉴스
- 홈페이지제작
- #happycgi
- CGIMALL
- #홈페이지제작
- 홈페이지
- Today
- Total
목록#세로중앙정렬 (1)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] Display flex를 이용한 컨텐츠 세로중앙정렬
일전에 세로 가운데정렬에 대한 자료를 올렸지만 이번에는 display:flex를 이용한 세로 가운데 정렬을 할수 있는 방법입니다. display:flex 속성을 가진 영역 안의 컨텐츠의 정렬방법을 align-self: center; -webkit-align-self: center; 를 이용하면 가로크기에따라 세로 중앙에서부터 채워지는것을 확인할 수 있습니다. 줄이기전 줄인후 사용법은 아주 간단합니다. 텍스트가 늘어나도 가운데부터 정렬이되여 화면상에 보여줍니다. 텍스트가 늘어나도 가운데부터 정렬이되여 화면상에 보여줍니다. 하위버전의 브라우저에서는 지원이되지 않기때문에 사용상에 제약이 있지만 모바일이나 상위버전에만 작업을 할경우에는 유용합니다 ^^ 위속성이외에도 Flex를 이용한 다양한 레이아웃 및 속성들이..
웹프로그램밍 자료실/HTML 자료
2019. 3. 4. 09:13