html中怎样让插入的图片居中？_IT百科

一般来说可以用CSS中的“text-align:center属性，margin:0auto或定位属性”就可以居中。但是主要看是看你的页面布局是怎样的，是否用了定位

1、img标签中的align属性不是定义图像的位置，而是定义图像与周围文字的位置，并且不推荐使用这个属性。

2、要给img定义一个父标签，让这个父标签里面的内容居中，那么img自然就居中了。

比如说：<palign="center">img??</p>

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html，填写问题基础代码。

2、在index.html中的<body>标签中，将<img>标签调整为：<div style="text-align:center"><img src="small.png" /></div>。

3、浏览器运行index.html页面，此时图片成功被居中显示了。

1、前端用到的编辑器有很多，本例通过选择SublimeText3编辑器来实现文字居中图片的制作。第一步，打开电脑中安装的SublimeText3，新建demo文件夹用来存放文件，在里面新建一个html文件，通过Tab快捷键迅速创建一个html模板，并命名标题。如图：

2、第二步，在顶部head标签里引入外部CSS文件。当然，因为本例比较简单，就直接写在style标签里了。建议实际开发应该写在外部CSS文件中。

3、第三步，在Body中写简单的html代码。在一个容器div中，给一个类名，然后加一个子div，命名类名，用来填充文字。子div中加一个h标签，引入文字，随便写几个文字。如图：

4、第四步，写父级div的样式。其主要作用是包裹子级div。为了看得比较明显，加一个边框样式：border：1pxsolid#093。如图：

5、第五步，写主要的字div样式。设置长度和宽度，以及边框样式；文字颜色以及字体大小；接着以一张图片作为背景图片，不重复：background:url(images/0.jpg)no-repeat。如图。你也可以随时在浏览器中查看效果。可以看到，此时，文字是在图片最上面。

6、第六步，接着是最关键的部分，设置文字居中于图片，包括垂直和水平方向上的居中。其中，line-height：630px，使行高等于高度，文字即可在垂直方向居中；text-align:center，实现水平居中。如图：

欢迎分享，转载请注明来源：内存溢出

html中怎样让插入的图片居中？