zoukankan      html  css  js  c++  java
  • 由12306出错想到的div垂直居中的问题

    今天想看看元旦回家还有没有余票,偷偷的打开了12306,开始查询回家的车票,结果发现,竟然查询不出来,再查直接出错了

    看到这个很郁闷,很纠结,但是突然想到了最近一直想实现div垂直居中,赶紧试了一下12306这么大的网站肯定是可以垂直居中的,

    试了一下,果然没有让我失望,适应各种分辨率垂直居中。

    太好了,果然右键源代码

    div class="err_text">
                             <ul id="error" >
                             <li id="err_top">
                             
                             </li>
                                                      <li id="err_bot">  网络可能存在问题,请您重试一下!
    </li>
    </ul>
    </div>

    然后再看一下css是怎么写的吧

    .err_text{
    
        position:absolute;
        margin-top:-159px;
        
        top:50%;
        left:50%;
        margin-left:-247px;
        width:495px;
        height:282px;
    
    
    
    }
    #error{
        width:495px;
        margin-left:auto;
        margin-right:auto;
        list-style:none;
    
    }
    #error li{
        list-style:none;
    }
    #err_top{
        background:url(err_top.gif) no-repeat;
        height:78px;
        line-height:78px;
        width:495px;
        
    }
    #err_bot{
        background:url(err_bot.gif) no-repeat;
        height:204px;
        padding-top:50px;
    
        width:495px;    
        text-align:center;
        font-size:14px;
        font-weight:bold;
    
    }
    View Code

    这时候聪明的你一定发现了,关键代码其实就是top:50%,left:50%,当然了前提是要绝对定位,这样就可以实现居中了

  • 相关阅读:
    Sqli-Labs less46-53
    Sqli-Labs less38-45
    Sqli-Labs less32-37
    移动web问题小结
    伪类与伪元素
    HTML5 视频直播
    判断鼠标移入移出元素时的方向
    Input操作文件
    利用WebStorm来管理你的Github
    webkit开发,app移动前端知识点
  • 原文地址:https://www.cnblogs.com/bjjjunjie/p/4169576.html
Copyright © 2011-2022 走看看