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);
} );
} );