CSS에서 이미지를 중앙에 배치하는 방법은 무엇입니까? CSS 이미지를 중앙에 배치하는 방법 요약

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

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

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

1. 이미지의 가로 가운데 맞춤을 위해 여백: 0 자동을 사용하세요.

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

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="margin: 0 auto;" />
</div>

2. 텍스트의 수평성을 사용합니다. centering 속성 text-align: center는 이미지의 수평 센터링을 구현합니다.

css image 수평 센터링 코드:

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="display: inline-block;" />
</div>

2. CSS 이미지의 수직 센터링을 구현하는 방법을 살펴보겠습니다

1. high == 라인 사용 구현률이 높은 이미지 세로 센터링

css 이미지 세로 센터링 코드는 다음과 같습니다.

<div style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;">
<img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="display: inline-block; vertical-align: middle;" />
</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 alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="display: inline-block;" />
</span>
</div>

참고: 이 방법은 테이블의 수직 센터링 속성을 사용합니다

설명: 디스플레이: 테이블; display: table-cell; 이 방법은 IE6/IE7과 호환되지 않습니다. IE67을 지원하지 않으면

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

3. 절대 위치 지정을 사용하여 이미지의 세로 중심 맞춤을 달성합니다.

css 이미지 세로 중심 맞춤 코드는 다음과 같습니다.

<div style="width: 500px;height:200px; position: relative; border: green solid 1px;">
<img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" />
</div>

참고: 이미지의 너비와 높이가 알려진 경우 이 방법을 사용할 수 있습니다.

위 속성에 대한 자세한 내용은 css 사용자 매뉴얼을 참조하세요.

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