<!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>
1、首先先准备图片素材和文字语言。
2、添加CSS样式修饰，最外面的大框添加宽度居中。
3、现在的图文是这样排版。
4、想要将图文左右排版，无非是定位或者浮动，对图片块和文字块都添加了浮动效果后。
5、如图添加浮动后，文字部分因为文字太长超出了他所用那的范围，所以被挤到到了下行的右侧。
6、这时候，将文字区域设置下宽度，不让他超过最大范围就行了，如图设置宽度为450px。
7、然后再预览效果图，就完美解决了。
使用定位来写的，首先一个大盒子装着图片，
然后一个盒子装着头像和文字，把装着头像和文字
的盒子根据装着图片的盒子进行定位就可以了，
像这样的其实很简单的，要多思考和分析
代码，要注意图片你要自己放图片，和修改图片路径
<!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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）