如何使图片在div里上下居中

代码

<style type="text/css">
         .box  {
          /* 非IE的主流浏览器识别的垂直居中的方法 */
         display :  table-cell ;
         vertical-align : middle ;

          /* 设置水平居中 */
         text-align : center ;

          /*  针对IE的Hack  */
         *display :  block ;
         *font-size :  175px ; /* 约为高度的0.873，200*0.873 约为175 */
         *font-family : Arial ; /* 防止非utf-8引起的hack失效问题，如gbk编码 */

         width : 200px ;
         height : 200px ;
         border :  1px solid #eee ;
         
         width : 100px ;
         height : 100px ;
         }
        .box img  {
          /* 设置图片垂直居中 */
         vertical-align : middle ;
         cursor : pointer ;
         }
        </style>

 

 

Dom元素:

 

 

代码

                   < div  id ="div1"   class ="box" >
                      < img  src ="xxx.png"   />< br  /> 风华绝代

                   </ div >

 

 

 这种方式在ie8和firefox3.5中显示正确，在ie7及以下版本无法正确显示，其它浏览器没有测试。因此改成了下面的方式：

 

代码

         .box {
         float : left ;
         width : 80px ;
         height : 80px ;
         border :  1px solid #eee ;
         }

        .selected  {
            border : solid 1px black ;
            background-color : Aqua ;
            cursor : pointer ;
         }
        .box img  {
          /* 设置图片垂直居中 */
         vertical-align : middle ;
         cursor : pointer ;
         }

 

 

 

转载于:https://www.cnblogs.com/pkurain/archive/2009/12/21/1628630.html