오늘은 CSS를 이용해서 삽입된 이미지를 가운데 정렬하는 방법에 대해 다루도록 하겠습니다.
이미지 가운데 정렬하는 2가지 방법
1. 부모 요소에 text-align:center 적용
간단한 방법으로는 이미지 요소(element)의 부모 요소에 text-align:center를 적용해주는 방법이 있습니다. 다음 html 코드를 보시면 img 요소를 아이디가 pororo인 div 요소가 포함하고 있습니다. div 요소가 img 요소의 부모인 것이죠. img 요소는 div 요소의 자식인 것이고요.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>이미지 가운데 정렬</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="pororo">
<img src="pororo.JPG" width="50%">
</div>
</body>
</html>
이 html 코드를 다음과 같은 css 코드로 꾸며주면 이미지가 가운데에 위치하게 됩니다.
style.css
#pororo {
text-align: center;
}
부모의 속성은 자식에게 상속됩니다. 유전된다고 표현할 수도 있겠네요. 이 방법은 그 원리로 이미지가 가운데 정렬되게 한 것입니다.
2. 이미지 display 속성을 block으로 변경
다른 방법을 하나 더 소개시켜드리겠습니다. inline-block 요소였던 이미지 요소를 block 요소로 바꿔줍니다. 그 후에 margin 속성값을 auto로 설정해주면 이미지가 가운데에 위치하게 됩니다. html 코드와 css 코드는 각각 다음과 같습니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>이미지 가운데 정렬</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<img src="pororo.JPG" width="50%">
</body>
</html>
style.css
img {
display:block;
margin:auto;
}
출력 결과는 동일하기 때문에 생략하겠습니다.
관련 글
'Dev > HTML, CSS' 카테고리의 다른 글
| [css] margin과 padding의 값 개수에 따른 의미 (0) | 2020.07.06 |
|---|---|
| div 요소 테두리 그리기(css) (0) | 2020.07.04 |
| 태그(tag)와 요소(element) 용어 정리 (0) | 2020.07.03 |
| html 문서 내 의 의미는? (0) | 2020.06.19 |
| 그라데이션 효과 주기(css) (1) | 2020.06.02 |
| sticky header와 sticky footer 만들기(css) (8) | 2020.06.01 |
| 반응형 웹페이지 기본 틀 만들기(그리드, 미디어쿼리 활용) (0) | 2020.05.26 |
| php 변수값을 javascript 변수에 대입하려면? (0) | 2020.05.20 |