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

컴프

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

· 8년 전 · 조회 3112 3112

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에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
137	HTML	테이블안에 있는 글 자동 정렬하기 [1]	작은새 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3778
136	HTML	Ajax강의- 첫번째 강의의 pdf중 발표문건 61-65	pearly 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4132
135	HTML	Fedora Core FTP로 설치 [3]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4234
134	HTML	Ajax강의- 첫번째 강의의 pdf중 발표문건 21-30	pearly 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4647
133	HTML	전체화면으로 페이지 열기	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3273
132	HTML	이번에는 텍스트영역에서 메세지별로 타이핑 시킵니다	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3133
131	HTML	텍스트 상자에서 메세지가 타이핑 됩니다	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2808
130	HTML	오늘 날짜와 요일 넣기 [1]	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3685
129	HTML	창의 사이즈 변경 금지 시키기 [1]	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2748
128	HTML	손님의 방문 횟수를 알려 줍니다	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3338
127	HTML	자바스크립트 버튼에 링크 걸기	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	8594
126	HTML	이름을 물어보고 인사하는 스크립트	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2541
125	HTML	폼 버튼을 클릭하면 경고 메세지 보내기	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3007
124	HTML	포토샵 작업 중에 잘되던 한글 입력이 갑자기 안될때 있으시죠? [5]	두루굳센™ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5355
123	HTML	버튼에 스타일주기(익스)	MCLUB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2929
122	HTML	오른쪽마우스클릭시메뉴(익스전용)	MCLUB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2837
121	HTML	오른쪽마우스클릭시메뉴(익스전용)	MCLUB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3436
120	HTML	영카트에서 카테고리 검색하기	rolo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3201
119	HTML	자바스크립트로 url 획득	MCLUB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3186
118	HTML	포샾 팁강좌입니다...퍼온 것입니다. [3]	버섯도리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5070
117	HTML	투명도조절 [2]	MCLUB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3647
116	HTML	textarea에 입력된 길이만큼 게이지로 표현	유자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3507
115	HTML	버튼 하나로 링크두개를 열어보자	유자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3898
114	HTML	[펌]다중 업로드	강강술냄세 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3857
113	HTML	포토샵에서 제가 간단하게 쓰는 점선 쓰는 방법입니다 [5]	yunni 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5281
112	HTML	register_globals = on /off 차이점	드렁크수달스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3613
111	HTML	밑의 갤러리 압축 화일 [4]	진아맘 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4092
110	HTML	getElementById와 getElementsByName	드렁크수달스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3521
109	HTML	[소개] smtp를 이용하여 mail 보내기	rolo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4863
108	HTML	cart클래스2	홀로남은자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2979