首頁 > web前端 > html教學 > 由12306出错想到的div垂直居中的问题_html/css_WEB-ITnose

由12306出错想到的div垂直居中的问题_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:52:08
原創
1212 人瀏覽過

今天想看看元旦回家还有没有余票,偷偷的打开了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;}
登入後複製

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板