css로 화면에 중앙에 내용을 정렬하는 방법은 몇가지 테크닉이 있는데 그 가운데 첫번째로 margin 속성을 이용하는
방법을 설명드리면 아래와 같이 스타일을 지정하는 방법이 있습니다.
위와 같이 div(컨테이너)를 가운데 정렬시키는 방법은 margin:auto 속성을 지정하면 됩니다.
아래에 샘플 코드를 예시합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>가운데 정렬 시키기</h2>
<p>블록 요소(div와 같이)를 수평으로 중앙에 놓으려면 margin:auto</p>
<div class="center">
<p>안녕하세요.</p>
</div>
</body>
</html>
'css' 카테고리의 다른 글
| 반응형 웹디자인(RWD) 알아보기(1) (0) | 2024.02.16 |
|---|---|
| padding 속성 이해하기 (0) | 2024.02.15 |