css로 이미지 가운데 정렬하는 두가지 방법

코딩/web|2020. 6. 18. 09:04

오늘은 CSS를 이용해서 삽입된 이미지를 가운데 정렬하는 방법에 대해 다루도록 하겠습니다. 

 

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 요소로 바꿔서 요소 앞 뒤로 줄바꿈이 되게 합니다. 그 후에 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;
}

 

출력 결과는 동일하기 때문에 생략하겠습니다.