HTML如何让图片居中显示呢？

方法如下：

1、首先 新建a.html文件，并准备一张小标，如下：

2、使用浏览器打开a.html，可以看到默认情况，是图片置顶对齐，文字置底对齐，所以通常图片高，文字低，不能水平居中对齐，如下：

3、再次编辑a.html，加入以下css代码：.hlong *{display:inline-blockvertical-align:middle}保存

4、再次使用浏览器访问a.html页面，效果如图。是不是很简单呢？

扩展资料

HTML是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。

网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。

浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

CSS中定位背景图片的属性是：background-position，用法background-position 属性设置背景图像的起始位置。

你要水平居中可以：

div{background-position:center center}//第一个center是水平居中，第二个center是上下居中

CSS（层叠样式表）级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

思路：利用text-align属性将图片水平居中，然后设置padding-top的值使其垂直居中。

结构如下：

<div>

<img src="images/tt.gif" width="150" height="100" />

</div>

CSS样式如下：

div {width:300pxheight:150pxbackground-color:#CCCborder:#000 1px solidtext-align:centerpadding-top:50px}

释义：

图片的尺寸为150x100px，DIV的大小为300x200px；

background-color:#CCCborder:#000 1px solid为DIV加个边框和背景色，便于观察效果。

text-align:center,实现图片的水平居中；padding-top:50px，50px这个数值是经过计算得到的，padding-top的值具体算法如下：（DIV的高度 – 图片的高度）/2，但这里要注意，根据盒模型原理，我们还要将DIV原来的高度200减去padding-top的值，这样显示的才是正确的，否则DIV会变高。

方法二：

思路：只用padding属性，通过计算求得居中

结构代码同上；

CSS样式如下：

div {width:225pxheight:150pxbackground-color:#eeeborder:#000 1px solidpadding-top:50pxpadding-left:75px}

备注：这里DIV的宽高计算都遵循盒模型原理，计算方法同上。

方法三：

思路：

利用图片的margin属性将图片水平居中，利用DIV的padding属性将图片垂直居中。

结构代码同上；

CSS代码如下：

div {width:300pxheight:150pxbackground-color:#eeepadding-top:50pxborder:#000 1px solid}

img {display:blockmargin:0 auto}

备注：

Img是内联元素，要设置其margin属性使其居中，就要将其转换为块元素display:block然后利用margin:0 auto实现图片的水平居中；（有的设计师为图片再加个div标签，然后通过div标签的margin实现居中

---