html에서 img를 화면 가로로 가운데에 배치하는 방법

HTML에서 img태그를 가로로 가운데에 배치하는 방법은 다음과 같습니다.

태그에 style 속성 사용하기

가장 간단한 방법은 img태그에 style 속성을 사용하여 가로 중앙 정렬을 지정하는 것입니다. 이때 text-align 속성과 margin 속성을 사용합니다.

<img src="image.jpg" style="display: block; margin: 0 auto;">  

위 코드에서는 display 속성을 block으로 설정하고, margin 속성의 왼쪽과 오른쪽 값을 auto로 설정하여 이미지를 가로 중앙으로 정렬하도록 하였습니다.

CSS를 사용하기

CSS를 사용하여 가로 중앙 정렬을 지정할 수도 있습니다. 이때는 img태그에 class 속성을 추가하고, CSS에서 해당 클래스에 대해 가로 중앙 정렬을 지정합니다.

<img src="image.jpg" class="center">  

.center {  
  display: block;  
  margin: 0 auto;  
}  

위 코드에서는 center 클래스에 display 속성을 block으로 설정하고, margin 속성의 왼쪽과 오른쪽 값을 auto로 설정하여 이미지를 가로 중앙으로 정렬하도록 하였습니다.

부모 요소의 text-align 속성 사용하기

부모 요소에 text-align 속성을 지정하여 이미지를 가로 중앙으로 정렬할 수도 있습니다.

<div style="text-align: center;">  
  <img src="image.jpg">  
</div>  

위 코드에서는 img 태그를 div 태그 안에 넣고, div태그에 text-align 속성을 center로 설정하여 이미지를 가로 중앙으로 정렬하도록 하였습니다.