您现在的位置: 365建站网 > 365学习 > 讨论了好久的问题,IE、Firefox下CSS图片垂直居中的问题

讨论了好久的问题,IE、Firefox下CSS图片垂直居中的问题

文章来源:365jz.com     点击数:790    更新时间:2009-09-14 10:32   参与评论
 

通过百度和谷歌找了好久都没找着一个合适的方法。以下是自己找出的一种方法,自认为还可以,而且,也方便简单。

 

IE:当容器为div,或者tr,只要把容器的CSS属性line-height设置成容器的高度就行了.

当容器为a,且容器的css属性displayinline-block或者block,除了要把容器的Css属性line-height设置成容器的高度外,还要把图片的css属性display设置成list-item;

Firefox:当把容器的css属性display设置成table-row,css属性text-align属性生效,css属性vertical-align属性也生效,css属性不能设置成float;.

 

因此一个图片垂直居中的代码可以写成

 

<style type=”text/css”>

.div1

{

Line-height:200px;text-align:center;

}

</style>

<div class=”div1” style=”display:table-row; vertical-align:center; text-align:center;”><img src=”1.jpg” style=”height:200px;”></div>

Tag标签: css,垂直居中

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (790人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------