CSS 레이아웃 - 가운데 정렬 요소
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>
<div class="center">
<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>
</body>
</html>
게시글 목록
| 번호 | 제목 |
|---|---|
| 2982 | |
| 2981 | |
| 2980 | |
| 2979 | |
| 2978 | |
| 2977 | |
| 2976 | |
| 2975 | |
| 2974 |
HTML
Input Type Tel
|
| 2973 | |
| 2972 | |
| 2971 |
HTML
HTML5 input 유형
|
| 2970 | |
| 2969 | |
| 2968 | |
| 2967 | |
| 2966 | |
| 2965 |
HTML
html input select 요소
|
| 2964 |
HTML
HTML NAME 속성
|
| 2963 |
HTML
HTML METHOD POST GET
|
| 2962 |
HTML
html form action
|
| 2961 | |
| 2960 |
HTML
html form submit
|
| 2959 |
HTML
html form input 객체
|
| 2958 |
HTML
HTML 레이아웃 요소
|
| 2957 | |
| 2956 |
HTML
뷰포트 설정하기
|
| 2955 |
HTML
[HTML <head> 요소] 1
|
| 2954 | |
| 2953 |
HTML
[HTML 블록 및 인라인 요소]
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기