需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：img{float:left}。
3、浏览器运行index.html页面，此时div标签中的左侧图片与右侧图片通过css调整为了浮动而顶部对齐了。
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
* {
margin: 0
padding: 0
}
.demo {
margin: 0 0 0 100px
}
.img {
width: 200px
height: 200px
border: 1px solid #DCDCDC
padding: 5px
box-sizing: border-box
}
.img img {
width: 100%
height: 100%
}
.msg {
width: 200px
text-align: center
box-sizing: border-box
word-break: keep-all
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
position: relative
border: 1px solid #000000
/*left: -30px你是不是布局出现了问题,如果你非要左移的话,去掉注释*/
}
</style>
<body>
<div class="demo">
<div class="img">
<img src="http://pic1.win4000.com/wallpaper/6/578855acae491.jpg" />
</div>
<div class="msg">
自驾游(多余的文字)<br> 会员价：
<strong style="color: red">9999元</strong>
</div>
</div>
</body>
</html>
方法如下：一、行高（line-height）法
如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：
p
{
height:30px
line-height:30px
width:100px
overflow:hidden
}
这段代码可以达到效果。
二、内边距（padding）法
另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：
p
{
padding:30px
}
