常用布局总结

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>