HTML 요소 가운데 정렬 쉽게 하기
1. 방법
- Position과 margin 을 이용한다
- 상위 element에 position: relative 를 추가한후 하위에 position:absolute, margin, top, left, right, bottom 설정
body{ position:relative; border : 2px solid black; width:100%; height:100%; } #container{ position:absolute; border: 2px solid coral; width:500px; height : 500px; left:0; top:0; right:0; bottom:0; margin: auto; }
- margin : auto
- left:0, top : 0, left: 0, right: 0
- 위 두 속성을 꼭 추가 해야 가운데 위치한다
2. 예제 소스
<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> html{ height:100%; } body{ position:relative; border : 2px solid black; width:100%; height:100%; } #container{ position:absolute; border: 2px solid coral; width:500px; height : 500px; left:0; top:0; right:0; bottom:0; margin: auto; } section{ background-color: antiquewhite; height:500px; float: left; width:200px; } aside{ background-color : aquamarine; height:500px; float: right; width:200px; } </style></head><div id="container"> <section> content </section> <aside> sidebar </aside></div>
- 가운데 자리 잡힌 요소에 float 속성으로 태그들을 배치한다
'Front-End > HTML5 + CSS' 카테고리의 다른 글
| [CSS] @media 타입 (0) | 2016.12.18 |
|---|---|
| [CSS3] Flex Position - Flexbox Layout (0) | 2016.12.18 |
| [CSS] Height 100% 하는법 (0) | 2016.12.13 |
| [CSS] 3단 레이아웃 (float, display) (0) | 2016.12.11 |
| [CSS] 고정 <header>, <footer> 만들기 (0) | 2016.12.11 |
리딩리드