일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- #happycgi
- 사이트제작
- #동영상
- #홈페이지
- #jQuery
- #image
- 게시판
- #웹솔루션
- CSS
- jquery
- #이미지
- 웹솔루션
- #cgimall
- 홈페이지제작
- happycgi
- 홈페이지
- 해피씨지아이
- php
- #홈페이지제작
- #CSS
- javascript
- #뉴스
- CGIMALL
- 솔루션
- #해피CGI
- 해피CGI
- #쇼핑몰
- #업종별
- #솔루션
- 쇼핑몰
- Today
- Total
목록#align (3)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
CSS 입문자들에게 힘든 것중 하나인 가로 중앙, 세로 중앙 정렬을 손쉽게 소스까지 만들어주는 howtocenterincss콘텐츠 종류 , 너비, 높이, 정렬방식, 지원브라우저 등을 선택한 후 소스 코드 생성시 선택한 항목에 따라 소스 코드를 제공한다. 정렬에 어려움은 겪는 입문자에게 아주 유용한 사이트이다.
일전에 세로 가운데정렬에 대한 자료를 올렸지만 이번에는 display:flex를 이용한 세로 가운데 정렬을 할수 있는 방법입니다. display:flex 속성을 가진 영역 안의 컨텐츠의 정렬방법을 align-self: center; -webkit-align-self: center; 를 이용하면 가로크기에따라 세로 중앙에서부터 채워지는것을 확인할 수 있습니다. 줄이기전 줄인후 사용법은 아주 간단합니다. 텍스트가 늘어나도 가운데부터 정렬이되여 화면상에 보여줍니다. 텍스트가 늘어나도 가운데부터 정렬이되여 화면상에 보여줍니다. 하위버전의 브라우저에서는 지원이되지 않기때문에 사용상에 제약이 있지만 모바일이나 상위버전에만 작업을 할경우에는 유용합니다 ^^ 위속성이외에도 Flex를 이용한 다양한 레이아웃 및 속성들이..
빈영역에 div를 위치시킬때 컨텐츠를 세로 및 중앙 정렬을 할 수 있는 팁입니다. 영역내에 빈 div 공간을 위치 시킴으로써 출력하기 위한 블럭의 vertical-align:값 을 조정하여 컨텐츠 내용을 상하로 조절할 수 있습니다. 그리고 background영역의 text-align을 조정하여 좌우 정렬을 조정할 수 있습니다. HTML 내용 CSS .background{position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; text-align:center; } .background .inner_block{display:inline-block; *display:inline; *zoom:1; width:0; height:10..