HTML5에서 중앙에 이미지를 표시하는 방법-HTML 튜토리얼-php.cn

HTML5에서 중앙에 이미지를 표시하는 방법

奋力向前

풀어 주다： 2023-01-07 11:47:26

원래의

30568명이 탐색했습니다.

그림 중앙 정렬 방법: 1. 수평 중앙 정렬을 수행하려면 "margin:0 auto"를 사용합니다. 2. 수평 중앙 정렬을 수행하려면 "text-align:center"를 사용합니다. 3. 수직 중앙 정렬을 수행하려면 표를 사용합니다. 수직 센터링을 달성하려면 ;5 수직 센터링을 달성하려면 위치를 사용하십시오.

HTML5에서 중앙에 이미지를 표시하는 방법

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

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

1. margin:0 auto를 사용하여 이미지의 가로 가운데 맞춤을 구현합니다margin:0 auto实现图片水平居中

html图片水平居中代码：

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

로그인 후 복사

2、利用文本的水平居中属性text-align:center实现图片水平居中

html图片水平居中代码：

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

로그인 후 복사

二、我们来看看css图片垂直居中的实现方法

1、利用line-height实现图片垂直居中

html图片垂直居中代码如下：

<div style="text-align:center;width:500px;height:200px;line-height:200px;border:greensolid1px;">
<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、利用table实现图片垂直居中

html图片垂直居中代码如下：

<div style="text-align:center;width:500px;height:200px;display:table;border:greensolid1px;">
<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>

로그인 후 복사

注意：此种方法是利用了table的垂直居中属性

说明：这里使用display:table;和display:table-cell;来模拟table，这种方法并不兼容IE6/IE7，IE67不支持display:table，如果你不需要支持IE67那就可以用

这种方法有一个缺点：当你设置了display:table;可能会改变你的原有布局

3、利用position

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

<div style="width:500px;height:200px;position:relative;border:greensolid1px;">
<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>

로그인 후 복사

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

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

rrreee 2. 살펴보겠습니다. CSS 이미지의 수직 중앙 정렬 구현 방법

🎜1. line-height를 사용하여 이미지의 수직 중앙 정렬을 구현합니다. 🎜🎜🎜html 이미지의 수직 중앙 정렬 코드는 다음과 같습니다. 🎜rrreee🎜 🎜참고: 🎜이 방법을 사용하려면 먼저 높이를 표시해야 합니다. 🎜🎜🎜2. table을 사용하여 이미지의 수직 중앙 정렬 🎜🎜🎜html 이미지 수직 중앙 정렬 코드는 다음과 같습니다: 🎜rrreee🎜🎜참고: 🎜이 방법은 테이블의 수직 중앙 정렬 속성을 사용합니다🎜🎜 🎜설명:🎜여기에서는 display:table; 및 display:table-cell;을 사용하여 table을 시뮬레이션합니다. /IE67은 display:table을 지원하지 않습니다. IE67을 지원할 필요가 없다면 🎜🎜이 방법에는 단점이 있습니다: display:table; code> 원본 레이아웃을 변경할 수 있습니다🎜🎜🎜3. <code>position을 사용하여 이미지의 세로 중심 맞춤을 구현하세요🎜🎜🎜html 이미지 세로 중심 맞춤 코드는 다음과 같습니다.🎜rrreee🎜🎜지침:🎜 이미지의 너비와 높이를 알고 있으면 이 방법을 사용할 수 있습니다. 🎜🎜추천 학습: 🎜html5 비디오 튜토리얼🎜🎜

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