logo

HTML에서 이미지를 정렬하는 방법

Html 태그를 사용하여 웹페이지의 다른 위치로 이미지를 이동하려면 아래에 제공된 단계를 따라야 합니다.

1 단계: 먼저 텍스트 편집기에 Html 코드를 입력하거나 이미지를 정렬하려는 텍스트 편집기에서 기존 Html 파일을 열어야 합니다.

 Align an Image Hello User! This page helps us to understandhow to specify an image at a particular position in a pargraph using the Html tag. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp"> 

2 단계: 이제 커서를 정렬하려는 이미지의 태그입니다. 그런 다음 위치를 지정하려면 img 태그의 align 속성을 사용해야 합니다. 따라서 다음 블록에 설명된 것과 동일하게 정렬 속성을 입력해야 합니다.

 <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> 

3단계: 위치를 지정한 후 HTML 코드를 저장한 다음 파일을 실행해야 합니다. 다른 위치에 있는 단락의 이미지를 표시하는 다양한 HTML 코드는 다음과 같습니다.

1. 중간

이 정렬 값은 이미지를 중앙에 설정합니다.

 Align an Image at middle Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is first section in this page which describes how to specify an image at middle in a pargraph using the Html tag.</p> 
지금 테스트해보세요

위 HTML 코드의 출력은 다음 스크린샷에 표시됩니다.

HTML에서 이미지를 정렬하는 방법

2. 상단

이 정렬 값은 이미지를 맨 위에 설정합니다.

 Align an Image at Top Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is Second section in this page which describes how to specify an image at top in a paragraph using the Html tag.</p> 
지금 테스트해보세요

위 HTML 코드의 출력은 다음 스크린샷에 표시됩니다.

HTML에서 이미지를 정렬하는 방법

3. 바닥

이 정렬 값은 이미지를 하단에 설정합니다.

 Align an Image at bottom Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is third section in this page which describes how to specify an image at bottom in a paragraph using the Html tag.</p> 
지금 테스트해보세요

위 HTML 코드의 출력은 다음 스크린샷에 표시됩니다.

HTML에서 이미지를 정렬하는 방법

4. 왼쪽

이 정렬 값은 이미지를 왼쪽에 설정합니다.

 Align an Image at left Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is fourth section in this page which describes how to specify an image at left side of a paragraph using the Html tag.</p> 
지금 테스트해보세요

위 HTML 코드의 출력은 다음 스크린샷에 표시됩니다.

HTML에서 이미지를 정렬하는 방법

5. 오른쪽

이 정렬 값은 이미지를 오른쪽으로 설정합니다.

 Align an Image at Right Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is fifth section in this page which describes how to specify an image at right side of a paragraph using the Html tag.</p> 
지금 테스트해보세요

위 HTML 코드의 출력은 다음 스크린샷에 표시됩니다.

HTML에서 이미지를 정렬하는 방법