HTML에서 이미지가 중앙에 오도록 설정하는 방법

HTML에서는 여백 속성을 사용하여 이미지를 중앙에 배치합니다. 이미지 요소에 "margin:auto" 스타일을 설정하기만 하면 됩니다. margin 속성 값이 "auto"인 경우 브라우저는 요소를 중앙에 배치하는 목적을 달성하기 위해 요소가 상위 컨테이너의 왼쪽 및 오른쪽 여백을 균등하게 차지하도록 왼쪽 및 오른쪽 여백을 자동으로 할당합니다. .

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

Body 태그 아래에 img 태그를 생성하고 이미지를 문서에 삽입하면 이제 브라우저의 왼쪽 상단에 이미지가 표시되는 것을 볼 수 있습니다. 여기서 참조하는 이미지의 크기는 이제 200*125px

<img src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"   alt="图片">

입니다.

img 외부에 있을 수 있음 div 블록 태그를 생성한 다음 div의 너비를 설정하고 파일을 중앙에 배치합니다. margin:0 auto;

        <img src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"   alt="图片">

이미지를 상대 위치로 설정한 다음 백분율로 중앙에 배치할 수도 있습니다. ,

div{
        position:relative;
        left:50%;
    }

브라우저에서 미리보기 효과에서는 왼쪽과의 거리가 50%로 설정되어 있기 때문에 현재 사진의 왼쪽이 문서의 중앙에 위치하게 됩니다.

, 사진을 왼쪽으로 이동해야 합니다. 사진 너비의 절반만큼 이동하므로 사진의 크기를 알아야 합니다. 이제 이 사진의 크기는 200*125이므로 액자를 왼쪽으로 100px 이동하면 됩니다. 외부로 이동하므로 왼쪽에 음수 값을 지정합니다. - 100px; 최종 효과는 그림과 같습니다. 이 설정 후에는 이미지가 아무리 커도 중앙에 위치하게 됩니다. 화면은.

div{
        position:relative;
        left:50%;
        margin-left: -100PX;
    }

추천 학습: html 비디오 튜토리얼

위 내용은 HTML에서 이미지가 중앙에 오도록 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!