CSS / 이미지 가운데 정렬하는 방법
이미지를 가운데 정렬하는 방법은 여러 가지가 있습니다. 그 중 자주 사용되는 두 가지를 소개합니다. 두 방법 모두 아래처럼 이미지를 가운데에 놓습니다.
방법 1
이미지의 부모 요소에 text-align 속성을 추가하는 방법입니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { text-align: center; } </style> </head> <body> <div> <img src="images/200x200.png" alt=""> </div> </body> </html>
방법 2
부모 요소를 사용할 수 없고 이미지만 스타일링이 가능하다면, img 요소를 block 요소로 만든 후 margin 속성을 이용해서 가운데에 위치시킵니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> img { display: block; margin: 0px auto; } </style> </head> <body> <img src="images/200x200.png" alt=""> </body> </html>