提示:
在不同的编码模式下,文字的行高计算是不一样的,所以请记住选择与页面相对的编码
这个方法是利用
display:table-cell
在支持该属性的浏览器中,结合
vertial-align:middle
方法来实现图片垂直居中;
在不支持
display:table-cell
的浏览器(IE)中利用文字结合行高的方法来实现垂直居中;
display:table-cell
这个属性会导致一些属性失效,比如
margin
,所以使用这种方式让图片垂直居中时,涉及到多图片并排时有可能需要
将下面的XHTML结构复制到li结构中
;
关闭提示
页面编码选择:
utf-8
gb2312
图片外框定义
外框宽度:
px
外框高度:
px
边框尺寸:
px
边框颜色:#
边框类型:
none
solid
dashed
dotted
double
groove
ridge
inset
outset
XHTML代码结构:
<div
class
=
"test_box"
>
<img
src
=
"book.jpg"
alt
=
""
/>
</div
>
CSS代码样式: