51 css 图片文字同时垂直居中 z-index无效 父级元素塌陷 图片宽度自适应

1.今天遇到行内div和 有img和span  同时垂直居中的情况

      a. img   display:inline-block  vertical-align:center未果

      b. 直接float  调整margin实现

2. z-index无效 

       同级元素才存在z-index比较关系,,父级元素和子级元素无法比较

       return : 问题既不是父辈元素的position和z-index问题 ，也不是问题元素的float, 问题是父辈元素设置了 overflow:hidden!!!!!

3.当子元素全部为浮动元素时候

   父级元素高度塌陷, 可以父级 overflow:none;   也可以在最后的浮动元素后面加一个  

    

<div style ="clear: both"></div>

4.overflow:hidden

     div中加入此条 可防止图片将div撑开，而非仅仅用于不显示多余部分

5.宽度自适应

$(document).ready( function () { 
    var width= $("#test").width();
    $(".content-img div").each(function(){
        $(this).css("max-width",width);
    } );
} );