zoukankan      html  css  js  c++  java
  • CSS未知高度垂直居中

    clipboard.png

    <!doctype html>
    <html lang="en">  
      <head>  
        <meta charset="utf-8" />  
        <meta content="IE=8" http-equiv="X-UA-Compatible"/>  
        <title> CSS垂直居中</title>  
        <style type="text/css">  
          .container{  
            500px;/*装饰*/
            height:500px;  
            background:#B9D6FF;  
            border: 1px solid #CCC;  
          }  
           
        </style>  
      </head>  
      <body>  
        <h1>垂直居中(table)</h1>  
        <div class='container'>
            <table width="100%" height="100%">
                <tr>
                   <td align="center" valign="middle">
                      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
                   </td>
               </tr>
           </table> 
       </div>
         
      </body>  
    </html> 

    好了,我们看其CSS实现。凡是table能做到的,CSS都能做的,但各浏览器在CSS的差异比较大,因此要兼容它们难度很大。这涉及许多细节,各种流啊,display的表现效果与CSS hack,IE早些年搞了大堆的私有属性,这也有待我们深一步挖掘。我们先看最简单的实现,背景图片法

    背景图片法

    clipboard.png

    <!doctype html>
    <html>
    <head>
    <title> CSS垂直居中</title>
    <style type="text/css">
    .container {
      500px;
      height:500px;
      line-height:500px;
      background:#B9D6FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg)  no-repeat center center;
      border:1px solid #f00;
      text-align: center;
    }
     
    </style>
     
    </head>
    <body>
    <h1>垂直居中</h1>
    <div class="container">
        
    </div>
    </body>
    </html>

    CSS表达式法

    <html lang="en">  
      <head>  
        <meta charset="utf-8" />  
        <meta content="IE=8" http-equiv="X-UA-Compatible"/>  
        <title>司徒正美 CSS垂直居中</title>  
        <style type="text/css">  
          .container{  
            /*IE8与标准游览器垂直对齐*/
            display: table-cell;
            vertical-align:middle; 
            500px;/*装饰*/
            height:500px;  
            background:#B9D6FF;  
            border: 1px solid #CCC;  
          }  
          .container img{  
            display:block;/*让其具备盒子模型*/
            margin:0 auto;  
            text-align:center;
            margin-top:expression((500 - this.height )/2);/*让IE567垂直对齐 */
          }  
        </style>  
      </head>  
      <body>  
        <h1>垂直居中(CSS表达式)</h1>  
        <div class="container">  
          <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />  
        </div>  
      </body>  
    </html> 

    绝对定位法

    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta content="IE=8" http-equiv="X-UA-Compatible"/>
        <title>司徒正美 CSS垂直居中</title>
        <style type="text/css">
          div {
           /*IE8与标准游览器垂直对齐*/
            display:table-cell;
            vertical-align:middle;
            overflow:hidden;
            position:relative;
            text-align:center;
            500px;/*装饰*/
            height:500px;
            border:1px solid #ccc;
            background:#B9D6FF;
          }
          div p {
            +position:absolute;
            top:50%
          }
          img {
            +position:relative;
            top:-50%;
            left:-50%;
          }
      
        </style>
      </head>
      <body>
        <h1>垂直居中(绝对定位)</h1>
        <div class="container">
          <p>
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
          </p>
        </div>
      </body>
    </html>

    display:inline-block法

    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta content="IE=8" http-equiv="X-UA-Compatible"/>
        <title>司徒正美 CSS垂直居中</title>
        <style type="text/css">
          div {
            display:table-cell;
            vertical-align:middle;
            text-align:center;
            500px;
            height:500px;
            background:#B9D6FF;
            border: 1px solid #CCC;
          }
     
        </style>
        <!--[if IE]>
    <style type="text/css">
    i {
        display:inline-block;
        height:100%;
        vertical-align:middle
        }
    img {
        vertical-align:middle
        }
    </style>
    <![endif]-->
        
      </head>
      <body>
        <h1>垂直居中(inline-block法)</h1>
        <div class="container">
          <i></i>
          <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
        </div>
      </body>
    </html>

    writing-mode法

    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta content="IE=8" http-equiv="X-UA-Compatible"/>
        <title> CSS垂直居中</title>
        <style type="text/css">
          div{
            500px;
            height:500px;
            line-height:500px;
            text-align:center;
            background:#B9D6FF;
            border:1px solid #f00;
          }
          div span{
            height:100%9;
            writing-mode:tb-rl9;
          }
          div img{
            vertical-align:middle
          }
        </style>
      </head>
      <body>
        <h1>垂直居中(writing-mode法)</h1>
        <div class="container">
          <span>
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
          </span>
        </div>
      </body>
    </html>

    clipboard.png

  • 相关阅读:
    phpcms后台进入地址(包含No permission resources错误)
    phpmyadmin上传大sql文件办法
    ubuntu彻底卸载mysql
    Hdoj 2602.Bone Collector 题解
    一篇看懂词向量
    Hdoj 1905.Pseudoprime numbers 题解
    The Python Challenge 谜题全解(持续更新)
    Hdoj 2289.Cup 题解
    Hdoj 2899.Strange fuction 题解
    Hdoj 2199.Can you solve this equation? 题解
  • 原文地址:https://www.cnblogs.com/10manongit/p/12995600.html
Copyright © 2011-2022 走看看