728x90
1. 좌우 가운데 정렬
- 계층구조에서 부모요소에게 width값을 선언, height 값은 자식요소인 콘텐츠의 내용으로 사용.
- 부모요소에 height를 고정값으로 넣지 말것!
- width 값을 필수로 입력하고, 좌우 마진값을 auto로 설정한다. margin:0 auto;
■ 예시1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>레이아웃</title> <style type="text/css"> *{margin:0; padding:0;} .center{width: 200px; height: 100px; background-color: #ccc; margin:0 auto;} </style> </head> <body> <h2>블록요소의 가운데 정렬</h2> <div class="center"></div> </body> </html> |
■ 실행결과1
2. 화면 가운데 배치하기
- 화면 정가운데 배치는 position을 사용
- left:50%; top:50%; margin-left: -(width의 1/2)px; margin-top: -(height의 1/2)px;을 이용
- 요소의 크기에서 width, height 1/2 값을 뺀 값을 마진에 적용
■ 예시2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>레이아웃</title> <style type="text/css"> *{margin:0; padding:0;} .box{width: 200px; height: 200px; background-color: #0f0; position: fixed; left:50%; top:50%; margin-left: -100px; margin-top: -100px;} </style> </head> <body> <h2>박스 화면 가운데 배치하기</h2> <div class="box">화면 정가운데 배치</div> </body> </html> |
■ 실행결과2
※ 레이어 팝업으로 뜨는 광고 등을 화면의 가운데에 배치할 때, 주로 사용합니다.
반응형