zoukankan      html  css  js  c++  java
  • Div 布局之 DIV垂直居中显示

    中间放入表格  IE 火狐 chrome 测试通过

    <html>
        <style>
    #a {
        background: #fff000;
        500px;
        height: 500px;
        overflow: hidden;
        text-align: center;
    }
    </style>
        <body>
            <div id="a">
                <table width="100%" height="100%">
                    <tr>
                        <td align="center">
                            <img src="http://static.cnblogs.com/images/logo_small.gif" />
                        </td>
                    </tr>
                </table>
            </div>
        </body>

    </html> 

     中间放入表格  IE  测试通过 

    火狐 chrome 测试无效

    <html>
        <style>
        #image{ 
            500px;
            height:500px;
            background:#fff000;
            text-align: center;
            overflow: hidden;
        }
        #image img {
        vertical-align: middle;
       }
        #block {
            0px;
            height: 100%;
        }    
        </style>
        <body>
            <div id="image">
                <img src="http://www.mm21.cn/dimg6/qqtu/201105/20110507234620615.jpg"/>
                 <img src="" id="block"/>
            </div>
        </body>

    </html> 

    <html>
        <style>
     
       #global1{ 
            clear:left;
            100%; 
            background:#000000;
            text-align: center;
            overflow: hidden;
        } 
      #global{ 
            800px; 
            background:#FFFFFF;
            text-align: center;
            overflow: hidden;
        }
    #head{ 
            800px;
            height:200px;
            background:#555555;
            text-align: center;
            overflow: hidden;
        }   
        #left{ 
       float:left;
            200px;
            height:700px;
            background:#888888;
            text-align: center;
            overflow: hidden;
        }   
    #right{ 
       float:left;
            600px;
            height:700px;
            background:#777777;
            text-align: center;
            overflow: hidden;
        }   
    #bottom{ 
            800px;
            height:150px;
            background:#666666;
            text-align: center;
            overflow: hidden;
        }   
        </style>
        <body> 
      <div id="global1">
      <table width="100%" height="100%">
                    <tr>
                        <td align="center">
                               <div id="global">
                                   <div id="head">
                                       head
                                   </div>
                            <div id="left">
                                       left
                                   </div>
                          <div id="right">
                                       right
                                   </div>
                          <div id="bottom">
                                       bottom
                                   </div>
                            </div>  
                        </td>
                    </tr>
                </table> 
    </div>  
        </body>
    </html>
  • 相关阅读:
    Python学习笔记(11)递归与匿名函数
    Python学习笔记(10)局部变量、全局变量、常量
    Python学习笔记(8)函数、位置参数、可变参数、关键字参数
    Pyhthon学习笔记(7)三元表达式及列表生成式
    Python自动化学习笔记(5)字符串常用的方法
    Python自动化学习(4)列表与字符串的切片操作
    python自动化学习笔记(3)列表list和字典dict
    python自动化学习笔记(2)字符串格式化输出与条件判断及循环语句
    Python自动化学习笔记(1)认识接口测试以及postman、Charles工具简单应用
    《软件测试的艺术》 阅读整理(二)
  • 原文地址:https://www.cnblogs.com/heling/p/2585748.html
Copyright © 2011-2022 走看看