大小不确定图片垂直居中_html/css
            
                    来源:动视网
                                        责编:小采
                                        时间:2020-11-27 16:00:31
                    
            
            
                         
                
                
                    大小不确定图片垂直居中_html/css
                    大小不确定图片垂直居中_html/css_WEB-ITnose:如果图片大小不确定,怎样使图片在DIV中垂直水平居中呢?当然,如果用表格的话,另当别论了。这里只讨论使用css来控制的情况。  如果只是水平方向居中的话,用text-align:center;(火狐中用margin:0 auto;)这个属性就可以了。但是,垂直方向的居中好像很难做
                    
                 
                
             
                        导读大小不确定图片垂直居中_html/css_WEB-ITnose:如果图片大小不确定,怎样使图片在DIV中垂直水平居中呢?当然,如果用表格的话,另当别论了。这里只讨论使用css来控制的情况。  如果只是水平方向居中的话,用text-align:center;(火狐中用margin:0 auto;)这个属性就可以了。但是,垂直方向的居中好像很难做
                        
            
 如果图片大小不确定,怎样使图片在DIV中垂直水平居中呢?当然,如果用表格的话,另当别论了。这里只讨论使用css来控制的情况。 
 如果只是水平方向居中的话,用text-align:center;(火狐中用margin:0 auto;)这个属性就可以了。但是,垂直方向的居中好像很难做到,无论是用css里的"vertical-align:middle;",还是用img的align="absmiddle",图片在垂直方向似乎都无动于衷。
  发现了如下一个方法,做个收藏。
 样式部分:
 
.middle-out{
  width: 600px; 
  height: 385px; 
  position: relative; 
  display: table-cell;
  vertical-align: middle;
  text-align:center;
  border: 1px solid #f00;
  }
 .middle-in{
  position: static;
  *position:absolute;
  top:50%;
  }
 .middle-out .middle-in img{
  position:static;
  *position:relative;
  top:-50%;
  left:-50%;
  }
 HTML部分:
   
  ![]()
  
    
    
        大小不确定图片垂直居中_html/css
        大小不确定图片垂直居中_html/css_WEB-ITnose:如果图片大小不确定,怎样使图片在DIV中垂直水平居中呢?当然,如果用表格的话,另当别论了。这里只讨论使用css来控制的情况。  如果只是水平方向居中的话,用text-align:center;(火狐中用margin:0 auto;)这个属性就可以了。但是,垂直方向的居中好像很难做