CSS에서 이미지를 중앙에 배치하는 방법

CSS에서 이미지를 중앙에 배치하는 방법: 1. "margin:0 auto" 또는 "text-align:center" 스타일을 사용하여 이미지를 수평으로 중앙에 배치합니다. 2. "height == row height"를 사용하여 이미지를 수직으로 중앙에 배치합니다. 3. 사용 테이블은 그림의 수직 중심을 실현합니다. 4. 절대 위치를 사용하여 그림의 수직 중심을 실현합니다.

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

웹페이지 레이아웃을 할 때 사진의 위치가 전체 페이지의 미관에 영향을 미칠 수 있으므로 사진의 배치를 변경해야 하는 경우가 있습니다. 그러면 다음 글에서는 웹페이지의 사진 배치에 대해 소개하겠습니다. 웹 페이지에서 CSS를 사용하여 센터링을 수행하는 방법은 도움이 필요한 친구들에게 참고 자료가 될 수 있습니다.

Css 이미지 센터링은 CSS 이미지의 수평 센터링과 수직 센터링의 두 가지 상황으로 나눌 수 있습니다. 그럼 이러한 이미지 센터링의 구현 방법을 각각 살펴보겠습니다.

1. 먼저 CSS 이미지를 가로로 가운데 맞추는 방법을 살펴보겠습니다

1. margin: 0 auto를 사용하여 이미지를 가로로 가운데 맞춤

css 이미지 가로 가운데 맞춤 코드:

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img src="/static/imghwm/default1.png"  data-src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg"  class="lazy"  alt=""  style="max-width:90%"/>
</div>

2. 수평 센터링 속성 사용 text-align: 이미지의 수평 센터링을 위해 텍스트의 중심

css 이미지 수평 센터링 코드:

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img src="/static/imghwm/default1.png"  data-src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg"  class="lazy"  alt=""  style="max-width:90%"/>
</div>

(동영상 공유 학습: css 비디오 튜토리얼 )

2. CSS 이미지의 수직 센터링 구현 방법을 살펴보세요

1 높이 == 줄 높이를 사용하여 이미지의 수직 센터링을 구현합니다

CSS 이미지 수직 센터링 코드는 다음과 같습니다:

<div style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;">
<img src="/static/imghwm/default1.png"  data-src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg"  class="lazy"  alt=""  style="max-width:90%"/>
</div>

참고: 이 방법은 높이에서만 사용할 수 있습니다.

2. 테이블을 사용하여 이미지의 수직 중앙 정렬

css 이미지 수직 중앙 정렬 코드는 다음과 같습니다.

<div style="text-align: center; width: 500px;height:200px; display: table;border: green solid 1px;">  
<span style="display: table-cell; vertical-align: middle; ">
<img src="/static/imghwm/default1.png"  data-src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg"  class="lazy"  alt=""  style="max-width:90%"/>
</span>
</div>

참고: 이 방법은 테이블의 수직 중앙 정렬 속성을 사용합니다

지침: 디스플레이 사용: table ; 및 display: table-cell; 이 방법은 IE6/IE7과 호환되지 않습니다. IE67을 지원할 필요가 없으면

이 방법을 사용할 수 있습니다. 단점: 디스플레이 설정 시: 테이블; 원래 레이아웃이 변경될 수 있습니다.

3. 절대 위치 지정을 사용하여 이미지의 수직 중앙 정렬을 달성합니다.

css 이미지 수직 중앙 정렬 코드는 다음과 같습니다.

<div style="width: 500px;height:200px; position: relative; border: green solid 1px;">
<img src="/static/imghwm/default1.png"  data-src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg"  class="lazy"  alt=""  style="max-width:90%"/>
</div>

참고: 이미지가 알려져 있습니다. 너비와 높이는 이런 식으로 사용될 수 있습니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 CSS에서 이미지를 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!