常用布局总结

1，清除由于子元素浮动带来的高度塌陷

.clear:before, .clear:after{
content:"";
display:table;
}
.clear:after{
clear:both;
overflow:hidden;
}
.clear{
zoom:1;
}

2，图片和文字垂直居中对齐，图片和文字垂直居中对齐的方法

（1）父元素设置font-size=0,为了消除子元素使用display-inline-block带来的间隙

（2）子元素如果是文字就要单独设置font-size,子元素这只vertical-align=top，使子元素浮动到和父元素上方对齐，在设置line-height居中显示，line-height和图片高度相同。

<style type="text/css">
*{
margin:0px;
padding:0px;
}
.head{
width:90%;
background-color:red;
font-size:0px;
padding:5px 0px;
}
.name{
width:50%;
background-color:green;
font-size:25px;
vertical-align:top;
line-height:25px;
}
.operation{
width:50%;
background-color:orange;
text-align:right;
font-size:15px;
line-height:25px;
}
.operation img{
width:25px;
height:25px;
}
.dispinline{
display:inline-block;
}

</style>

<div class="head">
<div class="name dispinline">最新猜测</div>
<div class="operation dispinline">ddd</div>
</div>