无设高度图文自适应垂直居中display:inline-block(有待更好的方法---!)
display:inline-block的深入理解
可能大都会对这一属性感觉很迷惑和模糊,因为最常用的IE不识别,包括我也没用过.该属性大部分针对a和span内联元素.通常采用“无序列表（ul/li）”进行设计效果更加理想;
等会我的例子会用到这个属性,那么延伸一个问题：IE下块元素如何实现display:inline-block的效果？ 有两种方法解决:
1、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）。代码如下（...为省略的其他属性内容）：
代码:
div {display:inline-block;...} div {display:inline;}2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。代码如下：
代码:
div {display:inline; zoom:1;...}但这个方法有个弊端，zoom:1通不过,说是CSS不存在这个属性，不过不要紧，可以随机应变；CSS出这一属性自然有它的道理,以下案例可以给出display:inline-block正确的用法:以下例子是不设高度，使左右两个标签的内容自适应垂直居中，例子在全文最上方有图片显示．<style type="text/css"> #div1, #div2 {display:table-cell; *display:inline-block; vertical-align:middle; width:150px;} #div1, #div2{*display:inline} #div2 {color:#006633; font-size:12px} </style></head> <body> <div id="bd"> <div id="div1"><img src="ME.gif" /></div> <div id="div2"> <p>垂直居中的一个跨浏览器方案未知高度的非表格垂直对齐</p> <p>垂直居中的一个跨浏览器方案未知高度的非表格垂直对齐</p> <p>垂直居中的一个跨浏览器方案未知高度的非表格垂直对齐垂直居中的一个跨浏览器方案未知高度的非表格垂直居中的一个跨浏览器方案未知高度的非表格</p> </div> </div>
浙公网安备 33010602011771号