zoukankan      html  css  js  c++  java
  • 我的垂直居中

    如下:

    <!DOCTYPE html>

    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="../../favicon.ico">

        <title>Signin Template for Bootstrap</title>

        <!-- Bootstrap core CSS -->
        <link href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
        <style>
            .vertical-center {
                position: absolute;
                top: 40%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    <body>
        <div class="container vertical-center" style="border:1px solid blue;">
            <div class="col-lg-4 col-lg-offset-4 col-sm-6 col-sm-offset-3 col-xs-8 col-xs-offset-2" id="logindev" style="border:1px solid red;">
                <form class="form">
                    <h2>Please sign in</h2>
                    <label for="inputEmail" class="sr-only">Email address</label>
                    <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="">
                    <label for="inputPassword" class="sr-only">Password</label>
                    <input type="password" id="inputPassword" class="form-control" placeholder="Password" required="">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="remember-me"> Remember me
                        </label>
                    </div>
                    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
                </form>
            </div>
        </div> <!-- /container -->
    </body>
    </html>

  • 相关阅读:
    jdbc连接数据库(mysql,sqlserver,oracle)
    简单粗暴将sqlserver表以及数据迁移到oracle
    LXD 2.0 系列(五):镜像管理
    LXD 2.0 系列(十二):调试,及给 LXD 做贡献
    LXD 2.0 系列(七):LXD 中的 Docker
    LXD 2.0 系列(四):资源控制
    LXD 2.0 系列(三):你的第一个 LXD 容器
    LXD 2.0 系列(二):安装与配置
    LXD 2.0 系列(一):LXD 入门
    Debian-linux 网卡配置
  • 原文地址:https://www.cnblogs.com/luminji/p/4793680.html
Copyright © 2011-2022 走看看