고정 헤더 영역
상세 컨텐츠
본문
반응형
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2>Center an Image</h2>
<p>To center an image, set left and right margin to auto, and make it into a block element.</p>
<img src="paris.jpg" alt="Paris" style="width:40%">
</body>
</html>
<!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>
반응형
'스터디(코딩, 잡지식 등)' 카테고리의 다른 글
| css 애니메이션 효과 코드 텍스트 애니메이션 효과 넣는법 (0) | 2023.01.31 |
|---|---|
| 네비게이션바 메뉴 가운데 정렬 (0) | 2018.12.10 |
| 능력 있는 개발자들의 7가지 태도 (0) | 2018.03.05 |
| 좋은 프로그래머가 되는 24가지 방법 (0) | 2018.02.14 |
| 대한민국 직장인이 알아야 할 ‘연봉협상 10계명’ (0) | 2018.01.05 |
댓글 영역