[CSS] HTML 요소 가운데 정렬 쉽게 하기

Front-End/HTML5 + CSS 2016. 12. 13. 16:05

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

리딩리드

일	월	화	수	목	금	토
					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