zoukankan      html  css  js  c++  java
  • 用CSS让未知高度内容垂直方向居中

    方案一:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>Demo</title>
        <style type="text/css">
            #outer{
                width:500px;
                height:200px;
                margin: 50px auto;
                border:1px solid #CCC;
                display:table;
                text-align:center;
                #position:relative;
            }
            #middle{
                display:table-cell;
                vertical-align:middle;
                #position:absolute;
                #top:50%;
                #left:50%;
            }
            #inner{
                #position:relative;
                #top:-50%;
                #left:-50%;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="middle">
                <img id="inner" src="http://static.cnblogs.com/images/logo_small.gif"/>
            </div>
        </div>
    </body>
    </html>

      方案二:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>Demo</title>
        <style type="text/css">
            #outer{
                width:500px;
                height:200px;
                margin: 50px auto;
                border:1px solid #CCC;
                position:relative;
            }
            #inner{
                position:relative;
                left:50%;
                top:50%;
                margin-left:-71px;
                margin-top:-27px;
            }
        </style>
    </head>
    <body>
        <div id="outer">
                <img id="inner" src="http://static.cnblogs.com/images/logo_small.gif"/>
        </div>
    </body>
    </html>

      方案一主要原理是标准浏览器下用table和table-cell布局,然后用vertical-align:middle居中元素,但IE67不支持table布局,所以用了用了css hake,就是带#开头的属性。

      方案二用负margin实现,但缺点是要知道居中内容的宽度和高度。

  • 相关阅读:
    code of C/C++(2)
    code of C/C++ (1)
    dll 的编写和使用
    Python基础练习-数据类型与变量part2
    Python基础练习-数据类型与变量
    python基础练习-循环
    Linux grep
    nginx反向代理
    正则表达式
    Linux samba ing
  • 原文地址:https://www.cnblogs.com/jscode/p/2698809.html
Copyright © 2011-2022 走看看