css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中（文字高度超过图片，图片跟随文字居中，反之文字跟随图片居中非table实现）
<!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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
