水平垂直居中图片及文字(兼容IE6+)

最新推荐文章于 2018-10-29 11:25:54 发布

wlx200510

最新推荐文章于 2018-10-29 11:25:54 发布

阅读量308

点赞数

分类专栏：前端 conclusion

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

conclusion

3 篇文章 0 订阅

订阅专栏

简介：

如何使用css让不固定宽高的div水平垂直居中呢？这个问题似乎有很多解决办法，尝试了网上的最简单且兼容低版本浏览器的方法，但发现存在一些小问题，所以写此文章留存。

1、水平居中

1.1、父容器container添加css属性text-align:center; 子容器center添加css属性display:inline-block;

1.2、代码如下：

 
    XHTML 
   
         <!DOCTYPE html> 
        
         <html> 
        
         <head> 
        
         <meta 
         charset 
         = 
         "utf-8" 
         > 
        
         <meta 
         http-equiv 
         = 
         "X-UA-Compatible" 
          
         content 
         = 
         "IE=edge" 
         > 
        
         <title> 
         水平居中 
         </title> 
        
         <meta 
         name 
         = 
         "description" 
          
         content 
         = 
         "" 
         > 
        
         <meta 
         name 
         = 
         "viewport" 
          
         content 
         = 
         "width=device-width, initial-scale=1" 
         > 
        
             <style> 
        
         * 
         { 
          
         margin 
         : 
          
         0 
         ; 
          
         padding 
         : 
          
         0 
         ; 
          
         font-size 
         : 
          
         12px 
         ; 
          
         color 
         : 
          
         #FFF 
         ; 
          
         } 
        
         .container 
         { 
          
         text-align 
         : 
          
         center 
         ; 
          
         /*主要代码*/ 
        
         width 
         : 
          
         800px 
         ; 
          
         height 
         : 
          
         200px 
         ; 
          
         margin 
         : 
          
         0 
          
         auto 
         ; 
          
         background-color 
         : 
          
         #FF5E53 
         ; 
        
         } 
        
         .center 
         { 
          
         display 
         : 
          
         inline-block 
         ; 
          
         /*主要代码*/ 
        
         *display 
         : 
          
         inline 
         ; 
          
         zoom 
         : 
          
         1 
         ; 
          
         /*for ie67*/ 
        
         padding 
         : 
          
         10px 
         ; 
          
         border 
         : 
          
         1px 
          
         solid 
          
         #FFF 
         ; 
        
         } 
        
         </style> 
        
         </head> 
        
         <body> 
        
         <div 
         class 
         = 
         "container" 
         > 
        
         <div 
         class 
         = 
         "center" 
         > 
        
                 1、将父级元素设为text-align: center; 2、自身div设置为display: inline-block; 
        
         </div> 
        
         </div> 
        
         </body> 
        
         </html>

运行代码

2、水平垂直居中

2.1、具体还是看代码吧！

2.2、代码如下：

 
         <!DOCTYPE html> 
        
         <html> 
        
         <head> 
        
         <meta 
         charset 
         = 
         "utf-8" 
         > 
        
         <meta 
         http-equiv 
         = 
         "X-UA-Compatible" 
          
         content 
         = 
         "IE=edge" 
         > 
        
         <title> 
         水平垂直居中 
         </title> 
        
         <meta 
         name 
         = 
         "description" 
          
         content 
         = 
         "" 
         > 
        
         <meta 
         name 
         = 
         "viewport" 
          
         content 
         = 
         "width=device-width, initial-scale=1" 
         > 
        
             <style> 
        
         * 
         { 
          
         margin 
         : 
          
         0 
         ; 
          
         padding 
         : 
          
         0 
         ; 
          
         font-size 
         : 
          
         12px 
         ; 
          
         color 
         : 
          
         #FFF 
         ; 
          
         } 
        
         .container 
         { 
        
         display 
         : 
          
         table 
         ; 
          
         /*主要代码*/ 
        
         *position 
         : 
          
         relative 
         ; 
            
         /*for ie67*/ 
        
         background-color 
         : 
          
         #FF5E53 
         ; 
          
         width 
         : 
          
         800px 
         ; 
          
         height 
         : 
          
         200px 
         ; 
          
         overflow 
         : 
          
         hidden 
         ; 
          
         margin 
         : 
          
         0 
          
         auto 
         ; 
        
         } 
        
         .content 
         { 
        
         vertical-align 
         : 
          
         middle 
         ; 
          
         display 
         : 
          
         table-cell 
         ; 
          
         text-align 
         : 
          
         center 
         ; 
          
         /*主要代码*/ 
        
         *position 
         : 
          
         absolute 
         ; 
          
         *top 
         : 
          
         50% 
         ; 
          
         *left 
         : 
          
         50% 
         ; 
          
         /*for ie67*/ 
        
         } 
        
         .center 
         { 
        
         display 
         : 
          
         inline-block 
         ; 
          
         /*主要代码*/ 
        
         *display 
         : 
          
         inline 
         ; 
          
         zoom 
         : 
          
         1 
         ; 
          
         *position 
         : 
          
         relative 
         ; 
          
         *top 
         : 
          
         -50% 
         ; 
          
         *left 
         : 
          
         -50% 
         ; 
          
         /*for ie67*/ 
        
         padding 
         : 
          
         10px 
         ; 
          
         border 
         : 
          
         1px 
          
         solid 
          
         #fff 
         ; 
        
         } 
        
         </style> 
        
         </head> 
        
         <body> 
        
         <div 
         class 
         = 
         "container" 
         > 
        
         <div 
         class 
         = 
         "content" 
         > 
        
         <div 
         class 
         = 
         "center" 
         > 
        
         <img 
         src 
         = 
         "http://static.ydcss.com/www/img/logo.png" 
          /> 
         <br/> 
        
                     啦啦啦，啦啦啦，我是卖报的小行家.... 
        
         </div> 
        
         </div> 
        
         </div> 
        
         </body> 
        
         </html>

wlx200510

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
水平垂直居中图片及文字(兼容IE6+)

简介：如何使用css让不固定宽高的div水平垂直居中呢？这个问题似乎有很多解决办法，尝试了网上的最简单且兼容低版本浏览器的方法，但发现存在一些小问题，所以写此文章留存。1、水平居中1.1、父容器container添加css属性text-align:center; 子容器center添加css属性display:inline-block;1.2、代码如下：
复制链接

扫一扫