태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

CSS를 사용할 때의 정렬 : 수평 가운데 정렬

13년 전

기존에는 어떤 오브젝트라도 가운데로 정렬하기 위해 아래와 같은 코드를 사용해 왔습니다.
<code html>
<table align="center">...
<div align="center">...
</code>

이것을 CSS기반으로 수정한다면
<code html>
<table style="text-align: center;">...
<div style="text-align: center;">...
</code>
위와 같이 사용할 수 있는데, 이것은 블럭 레벨 오브젝트(table,div,p etc) 안에 있는 인라인 오브젝트(일반 텍스트, img etc)에만 적용되는 값입니다.\\
기존의 속성과 동일하게 블럭 레벨 오브젝트를 중간에 배치하고 싶다면 해당 오브젝트에 아래와 같이 margin을 사용합니다.
<code html>
<table style="margin: 0 auto;">...
</code>
또는
<code css>
table {
   margin: 0 auto;
  }
</code>
단, 사용시에는 아래와 같은 조건이 충족되어야 합니다.

조건:
  * 해당 오브젝트의 width가 설정되어 있어야 합니다.
  * [[http://hyeonseok.com/pmwiki/index.php/Markup/DocumentTypeDefinition|DTD]]가 선언 되어 있어야 합니다.

단순히 margin:0 auto;를 사용했는데 적용이 되지 않을 경우엔 위의 두 조건이 충족되었는지 다시 한번 확인해 보아야겠습니다.

===== 하위 호환성 =====

NN4와 익스5.5 이하 버젼에서는 margin: 0 auto;만으로는 가운데 정렬이 되지 않습니다.\\
익스6, 익스7에서도 DTD가 선언되어있지 않으면 하위 호환성을 위해 quirks-mode로 렌더링을 하기때문에 가운데 정렬이 되지 않습니다.

이때문에 부모 엘리먼트에 text-align: center;를 같이 적용시켜줘야합니다.
<code css>
body {
   text-align: center;
   }

div {
   margin: 0 auto;
   width: 80%;
   text-align: left;
   }
</code>

추천 목록

번호	제목
168	올플래시 사이트에서 iframe 으로 게시판 올리기
167	IE에서 셀렉트 박스 SELECT 위에 레이어 DIV 올리는 팁
166	마진(margin)과 패딩(padding)의 사용법 및 차이점
165	margin CSS 스타일
164	display : inline(혹은 block, none)
163	CSS셀렉터 정리(3)
162	CSS셀렉터 정리(2)
161	CSS (Cascading Style Sheets) 완벽 마스터
160	css 포지션
159	@font-face
158	IE CSS 팁
157	div display : inline block float
156	display: block과 inline
155	DIV 레이어 속성
154	숫자 이미지를 클릭하면 입력창에 해당숫자가 입력되게...
153	css layout
	CSS를 사용할 때의 정렬 : 수평 가운데 정렬
151	css 속성 중 float
150	시,도 구,군 다중 셀렉트구문
149	DB연동없는 2단 동적 셀렉트 메뉴 (배열이용)
148	Select \| 드롭다운 메뉴 (선택시 바로 이동) 1
147	테이블에 쓰이는 태그들 nowrap 과 table-layout
146	[Css] form 문에서 여백없애기
145	이쁜 테이블 태그입니다
144	input 박스 강제로 한글모드/영문모드 로 전환
143	문서내에 아이프래임 처럼 보이게 하기
142	입력상자에 잘못된값이 입력되면 input배경색이 빨간색으로 변경됩니다
141	입력폼에 내용을 다른 항목에 기억시킵니다
140	업로드시 지정된 확장자만 첨부 가능합니다
139	입력폼에 포커스가 이동하면 테두리 색상이 변경됩니다