CSS 레이아웃 - 가운데 정렬 요소

컴프

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 8년 전 · 조회 3106 3106

CSS 레이아웃 - 수평 및 수직 정렬

가운데 정렬 요소

<div>와 같이 블록 요소를 가로로 가운데 맞추려면 margin: auto;

요소의 너비를 설정하면 해당 요소의 가장자리까지 늘어나지 않습니다.

요소는 지정된 너비를 차지하고 나머지 공간은 두 여백 사이에서 균등하게 분할됩니다.

.center {

margin: auto;

width: 50%;

border: 3px solid green;

padding: 10px;

}

참고 :width 속성을 설정하지 않으면 (또는 100 %로 설정 한 경우) 가운데 맞춤은 효과 가 없습니다.

<!DOCTYPE html>

<html>

<head>

<style>

.center {

margin: auto;

width: 60%;

border: 3px solid #73AD21;

padding: 10px;

}

</style>

</head>

<body>

<h2>Center Align Elements</h2>

<p>To horizontally center a block element (like div), use margin: auto;</p>

<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>

</div>

</body>

</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
977	CSS	수직 탐색 막대 예제	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1661
976	CSS	Vertical Navigation Bar [1]	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2114
975	CSS	Navigation Bars	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1608
974	CSS	[CSS] Float : left, right, inherit, none.	이희현 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	5248
973	CSS	CSS 투명한 호버 효과 2	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3247
972	CSS	CSS 투명한 호버 효과	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3046
971	CSS	CSS 불투명도 / 투명성	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2126
970	HTML	레이아웃용 테이블에<th>나scope이 사용될 경우에는 오류임.	위토즈 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3038
969	HTML	IE9 이전 버전에서 Canvas 사용가능하도록 하는 js 라이브러리 [2]	위토즈 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3517
968	CSS	CSS 결합 자 - 인접한 형제 선택기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2439
967	CSS	CSS 결합 자 - 하위 선택자	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1929
966	CSS	CSS 결합 자 - 하위 선택기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1694
965	CSS	CSS 레이아웃 - 이미지 센터하기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2694
964	CSS	CSS 레이아웃 - 가운데 맞춤 텍스트	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2576
963	CSS	CSS 레이아웃 - 가운데 정렬 요소 현재 보는 글	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3107
962	CSS	float : The clearfix Hack(clearfix 해킹)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1807
961	CSS	float : The clear Property(clear 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1496
960	CSS	CSS 레이아웃 - 플로팅 및 삭제	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2269
959	CSS	CSS Overflow auto	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1889
958	CSS	CSS Overflow Hidden	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2144
957	CSS	CSS Overflow Visible	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2185
956	CSS	css position Overlapping Elements(겹치는 요소들)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2047
955	CSS	css position: absolute;	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2209
954	CSS	css position: fixed;	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2334
953	CSS	CSS 레이아웃 - position: relative; 속성 [1]	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2888
952	CSS	CSS 레이아웃 - position static 속성	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2495
951	CSS	너비, 최대 너비 및 여백 사용 : auto; 사용	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2375
950	CSS	display:block	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1852
949	CSS	Display: none;	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1903
948	CSS	display 속성	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2089