<!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>
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
div {position: relativeborder: 1px solid greenwidth: 200pxheight: 80px}
span {position: absolutebottom: 0}
3、浏览器运行index.html页面，此时成功实现了“文本”2个文字放到绿色div框的左下角。
div 中的字体如何用CSS控制居下的方法：1、用margin-top 或者padding-top 设置。
代码：
<div class="text"></div>
.text {width:??pxheight:??pxmargin-top:10px} //这里用margin或padding 都行。
2、设置行高，line-height 属性
如：line-height:30px 数字越大行高越高 行与行的距离越大。
代码：
<div class="text"></div>
.text {width:??pxheight:??pxline-height:??px}
