垂直居中

 

1. 兼容IE6

<!doctype html>
<html>
 <head>
  <title>My Document</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="Author" content="lazy2009.iteye.com">
  <script src="C:/javascript/jquery-1.10.2.js"></script>
  <script src="C:/javascript/json2.js"></script>
  <style>
    *{
        padding:0;
        margin:0;
    }

    #content {
        border: 1px solid red;
        width:500px; 
        height:400px;
        text-align:center;
    }
    #content *{
        vertical-align: middle;
    }
        img.aid {
            width:0;
            height:100%;
        }
  </style>
 </head>
 
 <body>

    <div id="content">
        <img src="" class="aid"></img>
        <span>Content here</span>
        <img src="http://www.baidu.com/img/bdlogo.gif"></img>
    </div>

 </body>
</html>

 

 div水平居中很容易，设置css样式 text-align: center;  就可以了。

垂直居中也有个属性 vertical-align: middle; 这个属性普通设置是没有效果的。

第一种方法：通过一个空白图片可以达到垂直居中的效果。

 

 代码如下 复制代码

<html>
 <title>图片居中</title>
 <style>
/*定义垂直居中*/
#test * {
 margin: 0px;
 padding: 0px;
 vertical-align: middle;
}

/*定义div大小，以及水平居中*/
#test {
 background: #fff000;
 width: 500px;
 height: 500px;
 text-align: center;
}

/*辅助图片高度填满div，宽度为0，所以看不到这个图片*/
#img {
 width: 0px;
 height: 100%;
}
</style>
 <body>
  <div id="test">
　　<!--辅助图片 -->
   <img alt="" src="" id="img">
 　　<!--要居中的图片 -->
    <img alt="" src="skin/images/top/logo.jpg">
   </div>
 </body>
</html>

 

个人觉得vertical-align: middle 是相对于左边的高度垂直居中的，我给左边一个填满div的图片，就可以实现垂直居中了。

第二种方法：往div里面加表格。

 

 代码如下 复制代码
<html>
    <style>
#a {
    background: #fff000;
    width: 500px;
    height: 500px;
    overflow: hidden;
    text-align: center;
}
</style>
    <body>
        <div id="a">
            <table width="100%" height="100%">
                <tr>
                    <td align="center">
                        <img src="skin/images/top/logo.jpg" />
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

在表格里就很容易设置居中了。

经测试，这两种做法都没有浏览器不兼容的问题。推荐用第一种方法。

另外，说一下overflow: hidden; 这个属性，当图片大小超出div的大小时，会影藏超出的部分。不设置的话，图片会全部显示，覆盖在div上。

<!doctype html>
<html>
 <head>
  <title>My Document</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="Author" content="lazy2009.iteye.com">
  <style>
    *{
        padding:0;
        margin:0;
    }
    #wrapper {
        border: 1px solid red;
        width:200px;
        height:200px;
        position:relative;
    }

    .content{
        border:1px solid red;
        width:100px;
        position:absolute;
        top:50%;
        height:120px;
        margin-top:-60px; /* negative half of the height */
    }
  </style>
 </head>
 
 <body>
        <div id="wrapper">
                <div class="content">
                    12342314
                </div>
        </div>
  <script>

  </script>
 </body>
</html>
<!doctype html>
<html>
 <head>
  <title>My Document</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="Author" content="lazy2009.iteye.com">
  <script src="C:/javascript/jquery-1.10.2.js"></script>
  <script src="C:/javascript/json2.js"></script>
  <style>
    *{
        padding:0;
        margin:0;
    }
    
#content {height:100px; line-height:100px;border: 1px solid red;}

    

  </style>
 </head>
 
 <body>

    <div id="content">
        <p>Content here</p>
    </div>

 </body>
</html>

 

2.不兼容IE6

<!doctype html>
<html>
 <head>
  <title>My Document</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="Author" content="lazy2009.iteye.com">
  <style>

    #wrapper {
        display:table;border: 1px solid red;
        width:200px;
        height:200px;
    }
    #cell {display:table-cell; vertical-align:middle;}
    .content{
        width:100px;
        height:100px;
        border: 1px solid red;
    }
  </style>
 </head>
 
 <body>
        <div id="wrapper">
            <div id="cell">
                <div class="content">
                </div>
            </div>
        </div>
  <script>

  </script>
 </body>
</html>

 

 

<!doctype html>
<html>
 <head>
  <title>My Document</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="Author" content="lazy2009.iteye.com">
  <script src="C:/javascript/jquery-1.10.2.js"></script>
  <script src="C:/javascript/json2.js"></script>
  <style>
    *{
        padding:0;
        margin:0;
    }
    #wrapper {
        border: 1px solid red;
        width:200px;
        height:480px;
        position:relative;
    }
    #floater{
        float:left; 
        height:50%; 
        margin-bottom:-120px;
    }
    #content{
        clear:both; height:240px; position:relative;
        border : 1px solid red;
    }
  </style>
 </head>
 
 <body>
        <div id="wrapper">
            <div id="floater"></div>
            <div id="content">
                Content here
            </div>
        </div>
  <script>

  </script>
 </body>
</html>

 

<!doctype html>
<html>
 <head>
  <title>My Document</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="Author" content="lazy2009.iteye.com">
  <script src="C:/javascript/jquery-1.10.2.js"></script>
  <script src="C:/javascript/json2.js"></script>
  <style>
    *{
        padding:0;
        margin:0;
    }
    #wrapper {
        border: 1px solid red;
        width:200px;
        height:480px;
        position:relative;
    }

#content {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    height:240px;
    width:70%;
    border: 1px solid red;
}
  </style>
 </head>
 
 <body>
        <div id="wrapper">
            <div id="content">
                Content here
            </div>
        </div>
  <script>

  </script>
 </body>
</html>

 

 

posted @ 2013-07-19 12:15  广州天桥底-lazy_  阅读(182)  评论(0)    收藏  举报