firefox 下图片不居中

firefox 下图片不居中在ie下居中显示的

解决方案 »

  1.   

    图片是放在ul的li里
     li有写 float:left; 
      

  2.   

    背景的话用background-position;
    img的话 用margin,padding 
      

  3.   

    DIV、UL、li、image水平竖直居中代码大全(for ie firefox opera)~ 1、DIV在整个body中水平居中：#DivComment{
        position:absolute;
        top: 90%;
         left: 45%;
        width:40%;
        margin:0 0 0 -240px;
        padding: 10px 10px 0px 0px; 
    }效果见：这里的评论层2、DIV在另一个DIV中水平居中：#div1{
    TEXT-ALIGN: center;
    }
    #div2{
    MARGIN-RIGHT: auto;
    MARGIN-LEFT: auto; 
    height:200px;
    background:#F00;
    width:400px;
    }在要居中的div的父级元素（未必是div，可以是ul、li等）中设置TEXT-ALIGN: center;即可实现此div居中，但仅限于IE6&IE7。在此div中加上MARGIN-RIGHT: auto; MARGIN-LEFT: auto;或者margin: 0 auto;即可实现在firefox中也居中。3、UL居中和li水平居中：其实任何居中，只要是web元素，可加上id属性的都可以使用上面的方法。只是要记住需把ul、li的宽度设置一下才，最好加个背景色才可以看出是否居中。否则ul、li默认是一条撑满div的“楼梯”，是看不出是否居中的。4、image居中：也可用上述方法，但我发现有时直接用最简单的<div align=center><img src=”xxx.jpg”></div>，维护起来更方便
      

  4.   

    CSS技巧——实现图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari）概述
    如图所示，图片在一个定义了高度和宽度的DIV中水平垂直居中显示，这就是我们要达到的目的，其中图片可以是任何有高度和宽度的块元素。示例<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素）</title>
    <style media=”screen” type=”text/css”>
    .boxout{width:600px; height:300px; display:table; border:1px solid #000; background-color:#CCCCCC;}
    .boxin{display:table-cell; vertical-align:middle; text-align:center;}
    /*for IE*/
    .boxout{*position:relative;}
    .boxin{*width:100%;*position:absolute; *top:50%; *left:0;}
    .boxin img{*position: relative; *top:-50%; *margin:0; *padding:0;}
    .boxout img{ *margin-top:2px;*margin-bottom:2px;}/*for IE　图片4像素空白bug*/
    </style>
    </head>
    <body>
    <div class=”boxout”>
    <div class=”boxin”><img src=http://howard.li/logo.gif /></div>
    </div>
    </body>
    </html>说明之所以要这么费事，就是因为IE不支持CSS2中的display:table和display:table-cell。
    对支持这两个属性的浏览器来说，做到垂直局中很容易。如示例中CSS中前两行定义就可以了。
    对IE来说，用了绝对定位和相对定位，同过两次50%的偏移找到了我们要的中心。这个大家看一下上面示例中IE部分的CSS就明白了，讲起来不太好讲。以上CSS我特意把IE专用的部分分开来写，是为了好理解。用的时候可以和上面两行合并这样更好一点。
      

  5.   

    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>