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实现,但缺点是要知道居中内容的宽度和高度。

  • 相关阅读:
    SignalR2结合ujtopo实现拓扑图动态变化
    SignalR2简易数据看板演示
    使用SignalR 2进行服务器广播
    使用SignalR实时Web应用程序
    ZooKeeper安装
    MongoDB安装
    线程安全与非线程安全
    监听器,事件对象,事件源
    Graphics与Canvas
    JDialog
  • 原文地址:https://www.cnblogs.com/jscode/p/2698809.html
Copyright © 2011-2022 走看看