1、打开Hbuilder编辑器，新建一个html空白文档，输入基本的结构，这里设置一个外围的div盒子，给外围的div高度宽度和背景颜色，文字包裹到span标签里，文字也设置一下颜色，按下Crtl+S保存一下：
2、此时可以在软件右侧的窗口可以看到效果：
3、把外围盒子的position属性设置为relative，span标签里的position属性设置为absolute，设置top、left、right、bottom的数值，此时在右侧的窗口就会发现文字的位置已经改变了：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1{
width: 400px
height: 250px
background-color: red
text-align: center
}
</style>
</head>
<body>
<div>
<img width="200px" height="150px" src="dddd.png" />
<br/>
你啥时候嫁给我,hahahahaahahahahahaah
</div>
</body>
</html>
————————————————
这样就会能够将文字放在图片的正下方，得到以下图片：
文字位于正右边的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1{
width: 400px
height: 250px
background-color: red
}
.d2{
vertical-align: middle
}
</style>
</head>
<body>
<div>
<img width="200px" height="150px" src="dddd.png" />
你啥时候嫁给我
</div>
</body>
</html>
