mbg1346 - <div> 와 같은 블록 요소를 가운데 정렬하는 방법

1. div안에 div가운데 정렬하는 방법

</div>

바깥 쪽 div에는 text-align과 margin값을 준다.

안에 있는 div의 display의 기본값은 block으로 inline-block으로 바꿔준다.

2. div안에 텍스트 세로 가운데 정렬

텍스트 가운데 정렬은 text-align:center;로 해주면 되지만, 텍스트 세로정렬은 div에 display:tabel-cell과 vertical-align:middle; 해줘야한다.

가운데

</div>

1. margin: 0 auto를 이용한 가운데 정렬

일반 텍스트의 경우 text-align:center;를 사용하면 정렬할 수 있지만,

<div>, <p>, <blockquote> 등의 block 요소에는 text-align의 영향을 받지 않습니다.

이럴 경우 해당 요소에 width를 지정해주고 margin:0 auto;를 넣어주면 쉽게 가운데 정렬할 수 있습니다.

예제 : http://jsfiddle.net/SMaker/7d7r0cnx/

2. display:inline-block을 이용한 가운데 정렬

인라인 블록 요소가 text-align의 영향을 받는 것을 이용하면, 블록 요소를 가운데 정렬할 수 있습니다.

가운데 정렬할 요소에 display:inline-block을 주고 해당 요소를 블록 요소로 감싼 뒤에, 해당 블록 요소에 text-align:center을 주면 됩니다.

예제 : http://jsfiddle.net/SMaker/o6hbggjb/

List of Articles
번호	제목	조회 수
55	CSS 말줄임 처리하기	2,389
54	폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법 6	17,256
53	DIV 화면 정중앙에 박스 배치하기	1,385
52	DIV 가로 중앙정렬 , 세로 중앙정렬(display:flex; )	3,143
51	커서(cursor) 모양 정리	889
50	webkit-animation 적용 방법	1,231
49	각종 css3를 자동으로 만들어주는 사이트	1,932
48	html에 사용되는 Character Entities(특수기호)	2,996
47	이미지 마우스 hover시 좌우 기울이기	1,394
46	모바일웹에서 스마트폰으로 전화바로연결 코드	3,049

45	반응형 CSS 테이블	2,076
44	실시간 환율조회 html	2,341
43	HTML 만으로 마우스오버 구현하는 방법 1	10,987
»	<div> 와 같은 블록 요소를 가운데 정렬하는 방법 1	17,646
41	float 속성을 가진 div 100% 설정하는 방법	1,731
40	배경이미지 슬라이드 스크립트 1	2,494
39	CSS3 border-radius 이해하기	1,063
38	IE 버젼별로 css 따로 적용하는 방법	14,399
37	마퀴태그의 기본	10,512
36	이미지 바꾸기 소스 1	10,697

분류

평점