问题出在position absolute 绝对定位了，就脱离原来的文档流了除非你把这个去掉然后左浮动float left也要去掉；比较简单的做法就是，将他们放置一个盒子内，你想让文字跟图片居中，那么不一定要让图片当文字的参照物，而是让他们在大盒子内居中，不需要太复杂的框架结构，只需要利用样式的属性即可，并且各个浏览器都会正常显示，代码如下；lttable lttrlt！这里是一行 lttd ltimg src=quotgifquot lttd lttr lttrlt！这里是下一行 lttd 这里的文字在下方 lttd lttr lttable 不懂html。

可以以html为例，步骤一在body中建立文字信息以及图片内容，也就是在header中包含两个同级，图片和文字二在CSS中对文字图片进行简单样式添加，效果如图所示大盒子使用描边显示，里面包含了图片和下面的文字三；使用代码的方法，在图片上加字怎么做到呢 在html文件中，先建立一个div，然后在里面设置一个图片和文字h1，如图所示 现在打开后的样式是这样的，如图，图片在上，文字在下 然后对h1进行简单修饰，对文字大小fontsize和文字；1比如我在div里面书写了一些文字，然后想要在放入一张图片，这时候小伙伴可能会直接想到img标签，其实这个想法是错误的2首先，我们应该先给div设置宽度和高度，保证文字有一个范围3然后通过background给div添加一张。

ltdiv style=quottextalign centerquot ltimg src=quot图片地址图片名称jpgquot ltp你要输入的文字ltpltdiv如果图片和文字在同个div内，那就把div的css设置为textalign center；图片默认为内联元素，可以设置图片为块级元素，然后直接写文字就可以在图片下方了举例img displayblock HTML代码ltimg src=quot图片路径quot 这里是测试文字，可以在图片下方；图片下面加ltp标签即可，ltimg src=quot裤子jpgquotltaltpXXXltp；1首先，打开html编辑器，新建html文件2其次在indexhtml中的标签，输入代码3最后浏览器运行indexhtml页面，此时文字成功浮动到了图片右上方了。

lthtml 这样就会能够将文字放在图片的正下方，得到以下图片文字位于正右边的方法lt！DOCTYPE html lthtml lthead ltmeta charset=quotUTF8quot ltmeta name=quotviewportquot content=quotwidth=devicewidth， initialscal；新建html文件，例如indexhtml2在indexhtml中的ltbody标签中，输入html代码ltimg src=quotsmall3pngquot ltspanhello imageltspan3浏览器运行indexhtml页面，此时成功在图片右边写了文字“hello image”；代码，要注意图片你要自己放图片，和修改图片路径 lt！DOCTYPE html lthtml lthead ltmeta charset=quotutf8quot lttitle图片上放文字lttitle ltstyle type=quottextcssquot html，body margin0 autoimg display；1首先当然是要插入一张图片啦，代码如下lta href=quot#quot target=quot_blankquotltimg src=quotimages13pngquot width=quot240quot heigth=quot240quotlta 图片路径自己定义2定义一个层在图片上这里要用到定位positionltdiv。

lthtml 代码修改成这样就可以了，把几个IMG分别装到列表里面，然后定义一下这个列表的样式即可 文字部分用了一下p标签，给内容分一下行，代码看起来会规范一些另外，img标签是不需要闭合的，我把ltimg给删掉了。