html照片居中代码

日期：2026-03-13 08:12:58 作者：创始人浏览：0

html中图片居中代码

结论：用div+text-align:center实现图片居中。

代码：

验证过：2 01 8 年项目里，这个方法1 00%管用。
图片路径填真实地址。
alt属性别忘了写。

你自己掂量。

html中插入张图片如何让它居中？

哎，这玩意儿啊，我当年刚学的时候也懵。
你说的这些步骤，我给你讲讲我当年是怎么踩坑的。

那年头我刚入行，在一个小公司，老板让做一个简单的网站，我就负责前端。
手头就一台老掉牙的电脑，还是XP系统，内存5 1 2 MB，浏览器是IE6 你说可笑不可笑？
好家伙，开始找编辑器，啥Notepad啊，EditPlus啊，乱七八糟的。
最后老板给我买了套Dreamweaver，那钱现在想想，肉疼。
结果呢，用了半天，代码乱成一锅粥。

新建文件，搞了半天，, <head>, <body> 这些标签，我那时候是死记硬背，一个一个敲。
忘了哪个标签结束，或者忘了加引号，浏览器一打开，白屏，或者一堆乱码。
你说气人不？
然后到第二步，在<body>里放图片。
我一开始直接用，图片是能显示，但是没居中啊。
我琢磨半天，上网搜，有人建议用

包起来，再加个text-align:center。
我试了试，嘿，还真居中了！当时心里那个美啊。

第三步，浏览器打开index.。
IE6 那速度，等半天。
结果页面是居中的，但是图片很小，小得可怜。
我一看路径，图片放错了地方。
重新放好，刷新，OK了。

所以啊，你这个步骤，没错。
不过我当年用的是XP+IE6 +Dreamweaver，现在都换新设备了，轻松多了。
不过话说回来，当年那个IE6 ，打开一个网页都得等半天，图片稍微大点，直接崩溃。
现在想想，真是感谢技术发展啊。

对了，你那

，现在都用CSS了，更规范。
比如可以单独写个CSS文件，或者内联样式。
不过你这样子也行，简单直接。

html中图片居中的代码

记得有一次，我在做网页设计时，为了让一张图片在页面上居中显示，用了img标签的align属性设置为"center"。
结果，图片还是乖乖地贴着左边界，像个小跟班似的。
我瞪大了眼睛，盯着屏幕看了半天，突然意识到，这货是针对文本对齐的，不是针对图片位置的。
我叹了口气，又重新来过。

时间回到2 02 3 年，地点是我的书房。
我打开DW，新建了一个HTML页面，然后保存。
页面一打开，我就在body里加了个div，图片往里一放，再给div加了个背景色，好区分。
结果图片还是没动，我就纳闷了，这不是很简单的事情吗？
然后我仔细看了看img标签，哦，原来align="center"在这里不起作用。
我又试了试把图片放进一个p标签里，设置了text-align:center，嘿，这回图片果然居中了。
我拍拍脑门，恍然大悟。

可是，等等，我刚才突然想到，如果不用p或span标签，只通过CSS来让图片居中，是不是也可以呢？这倒是个值得探究的问题。

标签：图片居中