讨论了好久的问题,IE、Firefox下CSS图片垂直居中的问题
通過百度和谷歌找了好久都沒找著一個合適的方法。以下是自己找出的一種方法,自認為還可以,而且,也方便簡單。
?
IE:當容器為div,或者tr,只要把容器的Css屬性line-height設置成容器的高度就行了.
當容器為a,且容器的css屬性display為inline-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>
轉載于:https://www.cnblogs.com/Frontview/archive/2009/06/06/1497767.html
總結
以上是生活随笔為你收集整理的讨论了好久的问题,IE、Firefox下CSS图片垂直居中的问题的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 360图片搜索操作使用说明
- 下一篇: C++二维数组做形参