怎样让html中的img标签居中显示

html-css016

怎样让html中的img标签居中显示,第1张

01

先看下我们的html代码,在一个div里放入一个img图片标签。

02

再看下我们div的样式,主要地方是我们设置了div的宽度,为400px,如图所示的代码。

03

现在看下页面,可以看到,现在的图片是靠左显示的,并没居中。

04

要让img标签的图片居中,我们可以加上一行样式代码:text-align: center就行了。

05

再次看下页面,可以看到现在的图片已经是居中显示的了。

既然做背景能实现为什么不当做背景而直接插入img呢?

当然用img也是可以的实现的

1.

首先img的宽度必须是已知的(比如1920px);

2.

设置外部容器overflow:hidden(多余部分隐藏);

3.

设置外部容器position:relative(必须)

4.

设置img样式position:absolute

left:50%

margin-left

:-960px(这个数值为img宽度的一半)

5.

注:left:50%是将图片向右移动到容器一半的距离,margin-left:-960px是再将图片反向移动图片一半的距离,这样图片就在居中了,你可以不用理解这是什么意思,会用就行了。