css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中（文字高度超过图片，图片跟随文字居中，反之文字跟随图片居中非table实现）
Posted on 2014-12-26 11:31 人生梦想起飞 阅读(1084) 评论(0) 编辑 收藏 举报<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.recipeStep li {
display: block;
margin: 0px 0px 35px;
}
.recipeStep li .recipeStep_img {
width: 260px;
display: inline-block;
position: relative;
}
.recipeStep_img a {
cursor: auto;
width:100px;
height:100px;
background:red;
}
.recipeStep li .recipeStep_img img {
width: 220px;
height:100px;
background:red;
}
img {
border: 0px none;
vertical-align: middle;
}
.recipeStep_num {
width: 40px;
height: 40px;
background: none repeat scroll 0% 0% #E8E8E8;
border: 1px solid #BCBCBC;
border-radius: 20px;
position: absolute;
top: 50%;
right: 10px;
text-align: center;
line-height: 40px;
font-size: 30px;
color: #BA2020;
margin-top: -20px;
}
.recipeStep li .recipeStep_word {
width: 370px;
display: inline-block;
vertical-align: middle;
color: #666;
font-size: 16px;
}
</style>
</head>
<body>
<div class="recipeStep">
<ul>
<li>
<div class="recipeStep_img">
<a href="javascript:void(0);" data-id="0">
<img src="">
</a>
<div class="recipeStep_num">1</div>
</div>
<div class="recipeStep_word">准备好所有的食材。</div>
</li>
<li>
<div class="recipeStep_img">
<a href="javascript:void(0);" data-id="1">
<img src="http://i3.meishichina.com/attachment/recipe/201111/18/p320_201111181304588.JPG">
</a>
<div class="recipeStep_num">2</div>
</div>
<div class="recipeStep_word">再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好。</div>
</li>
</ul>
</div>
</body>
</html>
