zoukankan      html  css  js  c++  java
  • 元素定位后如何居中

    现在遮罩层使用的越来越多,因此,当元素定位之后如何在页面居中是首先要解决的问题。

    以div元素绝对定位为例:

    div{500px;height:400px;position:absolute;top:50%;left:50%;}

    div是以左上角o点距上50%距左边50%,此时div在页面显示的位置----->如图中红色矩形

    右图可知元素在上移自身高度的的一半,左移自身宽度的一半即可居中。用百分比设置width和height,也可以使用该方法

    div{margin:-200px 0 0 -250px;}

    实例:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>绑定账号</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <link rel="stylesheet" href="login-mask.css"/>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
    <div class="loginbox">
        <div class="mask"></div>
        <div class="login">
            <img src="image/background.png">
            <div class="midden">
                <p>登陆账号</p>
                <div class="mink">
                    <span class="icon-intruder">账号</span>
                    <input type="username"/>
                </div>
                <div class="mink" id="bottom_in">
                    <span class="icon-loginPW">密码</span>
                    <input type="password"/>
                </div>
                <div class="quer">确认绑定</div>-->
            </div>
        </div>
    </div>
    
    </body>
    </html>
    body,div,p,span,input{
        margin: 0;
        padding: 0;
        border:0;
    }
    .loginbox{
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        z-index:1000;
    }
    /*遮罩层*/
    .mask {
        width:100%;
        height:100%;
        background-color:#AAA;
        opacity:0.5;
    }
    /*内部内容*/
    .login {
        width:80%;
        height:300px;
        color:#fff;
        position:fixed;
        top:50%;
        left:50%;
        margin:-150px 0 0 -40%;
    }
    .login img{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
    .midden{
        position:relative;
        top:0;
        left:0;
        z-index:100;
    }
    .midden p {
        width:100%;
        font-weight:bolder;
        color:red;
        font-size:20px;
        text-align:center;
        margin-top:30px;
    }
    .mink {
        width:80%;
        margin:20px auto 18px;
        overflow:hidden;
        -webkit-border-top-left-radius:5px;
        -webkit-border-top-right-radius:5px;
        border:2px solid #e24740
    }
    .mink span {
        width:25%;
        background-color:#E24740;
        float:left;
        font-size:15px;
        font-weight:bold;
        padding:7px 2px 7px 5px
    
    }
    input{
        width:71%;
        height:95%;
        float:left;
        padding:5px 0;
        outline:none;
        font-size: 15px;
    }
    input:-webkit-autofill{
        -webkit-box-shadow:0 0 0 1000px #fff inset;
    }
    .quer {
        width:80%;
        text-align:center;
        background-color:#E24740;
        margin:30px auto;
        padding:7px 0;
        font-size:1em;
        color:white;
        font-weight:bold;
        border-radius:5px;
        border:2px solid #E24740;
    }

    其中input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset;}是为了解决input在chrome显示背景图颜色变黄。这个属性是chrome的私有属性。

  • 相关阅读:
    一些python练习题
    爬取某房源网数据
    练习1:定义 is_Even 函数,传一 int 参数,判断是否是偶数,return True;不是,return False
    pycharm中tkinter 不显示窗口
    保护眼睛颜色的RGB数值
    Python study----------class的实例化
    HTML----------STUDY
    Python study----------字典 popitem()
    Python study----------Python搜索路径
    Python study----------第三方module-----chardet(识别编码)
  • 原文地址:https://www.cnblogs.com/zmr2520/p/5282597.html
Copyright © 2011-2022 走看看