您的位置：首页 > Web前端 > CSS

html css 图片居中

2015-09-12 10:41 831 查看
与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了

自己写的一个，图片上下居中需要建立两个div 最外侧div 需要引入 jz_out类 ，里面div需要引入 jz_in类即可，兼容 ie8，360等

<!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>无标题文档</title><!-- 图片上下居中需要建立两个div 最外侧div 需要引入 jz_out类 ，里面div需要引入 jz_in类即可，兼容 ie8，360等--><style >.userinfo_editor {position:absolute;width: 1000px;height: 800px;border:ridge 1px red;left: 0px;top: 10px;}.jz_out{display: table;}.jz_in {display: table-cell;text-align: center;vertical-align: middle;background-color: #FFFFFF;}</style></head><body><div class="userinfo_editor jz_out"><div class="jz_in" href="#" target="_blank"><img src="http://img01.taobaocdn.com/tps/i1/T1LeeNXodaXXXXXXXX-130-150.png">sss</div></div></div></body></html>

以下为网上搜的

方法一：利用定位HTML结构如：CSS代码如：方法二：HTML结构同上,CSS代码如：【注意，当在css中设置了body元素字体的话，那么方法二在ie7下会失效的】最佳方法：CSS代码如：

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航