지역 사회
배우다
도구 라이브러리
AI 도구
여가
찾다
한국어
집 웹 프론트엔드 프런트엔드 Q&A HTML에서 그림을 중앙에 맞추는 방법

HTML에서 그림을 중앙에 맞추는 방법

王林
王林
May 16, 2023 am 10:37 AM

HTML(Hypertext Markup Language)은 웹페이지를 만드는 기본 언어 중 하나입니다. 웹 인터페이스 디자인에서는 이미지가 자주 사용되는데 HTML에서 이미지를 중앙에 배치하는 방법은 무엇입니까?

다음은 각각 CSS, HTML 테이블, HTML5 태그를 사용하여 구현한 3가지 방법입니다.

방법 1: CSS를 사용하여 이미지 중앙 정렬

CSS의 여백 속성을 사용하여 이미지를 수직 및 수평 중앙에 배치할 수 있습니다.

단계:

  1. HTML에 이미지 삽입: 
<img src="图片路径" alt="图片描述">
로그인 후 복사
  1. CSS 파일에서 img 요소의 스타일 설정
img {
  display: block;
  margin: 0 auto;
}
로그인 후 복사

설명:

  • display: block; 요소를 수평으로 중앙에 배치할 수 있습니다.
  • margin: 0 auto; 이미지의 여백을 설정하는 데 사용됩니다. 왼쪽 및 오른쪽 여백을 자동으로 설정하면 이미지가 컨테이너의 가로 중앙에 배치됩니다.

방법 2: HTML 테이블을 사용하여 이미지 중앙 정렬

HTML 테이블 요소와 정렬 속성을 사용하여 이미지의 수직 및 수평 중앙 정렬을 구현할 수 있습니다.

단계:

  1. HTML로 테이블 만들기: 

  

    
      <img src="图片路径" alt="图片描述">
로그인 후 복사
  1. 테이블의 정렬 속성이 "center"로 설정됩니다. 

  

    
      <img src="图片路径" alt="图片描述">
로그인 후 복사

설명:

  • 내부 콘텐츠의 수직 및 수평 정렬을 설정하는 데 사용됩니다.
  • 정렬 속성이 "center"로 설정된 요소에 중첩된 요소에 이미지를 추가하면

    방법 3: HTML5 태그를 사용하여 이미지 중앙에 배치

    HTML5에는

    ,
    ,