zoukankan      html  css  js  c++  java
  • 水平垂直居中图片及文字(兼容IE6+)实例

    直接看代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>水平垂直居中</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            * { margin: 0; padding: 0; font-size: 12px; color: #FFF; }
            .container {
                display: table; /*主要代码*/
                *position: relative;  /*for ie67*/
                background-color: #FF5E53;  800px; height: 200px; overflow: hidden; margin: 0 auto;
            }
            .content {
                vertical-align: middle; display: table-cell; text-align: center; /*主要代码*/
                *position: absolute; *top: 50%; *left: 50%; /*for ie67*/
            }
            .center {
                display: inline-block; /*主要代码*/
                *display: inline; zoom: 1; *position: relative; *top: -50%; *left: -50%; /*for ie67*/
                padding: 10px; border: 1px solid #fff;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <div class="content">
            <div class="center">
                <img src="https://static.cnblogs.com/images/adminlogo.gif" /><br/>
                居中居中居中居中居中居中居中居中居中.....
            </div>
        </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    DB2中创建表
    orcle定时备份
    db2的定时备份
    web.xml 中 resource-ref 的注意事项
    bootstrap
    jQuery
    web聊天室
    Django web 进阶
    Django自定义分页、bottle、Flask
    Queue、进程、线程、协程
  • 原文地址:https://www.cnblogs.com/sysg/p/6543833.html
Copyright © 2011-2022 走看看