标签：
在一些页面中经常涉及到图片和位置的摆放，下面介绍两种常见的摆放：
1：图片和文字垂直居中：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片和文字垂直居中</title>
<style>
.wxw span{display: inline-block;width: 100px;vertical-align: middle;}
.wxw p{display: inline-block;width: 100px;vertical-align: middle;}
.wxw img{vertical-align: middle;}
</style>
</head>
<body>
<div class="wxw">
<span>文字</span>
<img src="1.jpg" >
</div>
<div class="wxw">
<img src="1.jpg" >
<span>文字</span>
</div>
<div class="wxw">
<img src="1.jpg" >
<span>文字</br>文字</br>文字</span>
</div>
<div class="wxw">
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
<img src="1.jpg" >
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
</body>
</html>
出项的效果如下图：
2：图片和文字水平排列：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片和文字左右摆放</title>
<style>
.wxw{display: inline-block;border: 1px solid #cfcfcf;}
.wxw1{display: inline-block;border: 1px solid #cfcfcf;margin-left: 100px;}
.wxw img{width: 50px;position: absolute;height: 50px}
.wxw1 img{width: 100px;position: absolute;height: 100px}
.wxw-div{margin-left:60px;width: 200px;}
.wxw-div1{margin-left:110px;width: 200px;}
.wxw-div span{font-size: 20px;font-weight: 600;}
</style>
</head>
<body>
<div class="wxw">
<img src="head.jpg" >
<div class="wxw-div">
<p>评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论</p>
</div>
</div>
<div class="wxw1">
<img src="1.jpg" >
<div class="wxw-div1">
<span>标题</span>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
</div>
</body>
</html>
效果图如下：
标签：
原文地址：http://www.cnblogs.com/wxw1314/p/5210026.html
