HTML中,怎么在图片的下面加入文字啊?
发布网友
发布时间：2022-04-26 06:28
共3个回答
热心网友
时间：2022-04-06 13:47
使用定位来写的，首先一个大盒子装着图片，
然后一个盒子装着头像和文字，把装着头像和文字
的盒子根据装着图片的盒子进行定位就可以了，
像这样的其实很简单的，要多思考和分析
代码，要注意图片你要自己放图片，和修改图片路径
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>图片上放文字</title>
<style type="text/css">
html,body{
margin:0;
}
.auto-img{
display: block;
width:100%;
}
.box{
width:100%;
margin-top: 50px;
}
.box-cent{
width:50%;
margin:0 auto;
position: relative;
}
.texbox{
position: absolute;
width:50%;
line-height: 80px;
background-color: #0f0;
text-align: center;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
<div class="box-cent">
<img class="auto-img" src="images/000.jpg"/>
<div class="texbox">我是用来装头像和文字的盒子</div>
</div>
</div>
</body>
</html>
热心网友
时间：2022-04-06 15:05
在图片后面加个<br>标签，然后直接写文字，如果想将文字覆盖在图片上就用position定位
热心网友
时间：2022-04-06 16:39
前端代码看看
