由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;
}
这时候聪明的你一定发现了,关键代码其实就是top:50%,left:50%,当然了前提是要绝对定位,这样就可以实现居中了
由12306出错想到的div垂直居中的问题的更多相关文章
- div垂直居中的几种方法
CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...
- div垂直居中 css div盒子上下垂直居中
div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...
- div垂直居中的问题
工作和面试时常常会遇到怎么设置div垂直居中与浏览器中:包括固定宽高和不固定宽高的 1.固定宽高的div垂直居中 宽高固定的div很容易设置让其垂直居中 <div class="cen ...
- css的div垂直居中的方法,百分比div垂直居中
前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些d ...
- css中固定宽高div与不固定宽高div垂直居中的处理办法
固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...
- CSS——div垂直居中及div内文字垂直居中
最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...
- css 文本和div垂直居中方法汇总
https://blog.csdn.net/u014607184/article/details/51820508 https://blog.csdn.net/liuying1802028915/ar ...
- 纯css使div垂直居中,div垂直,div居中的方法
首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...
- div垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
随机推荐
- XMl解析之Pull解析
HttpUtils: package cn.qf.parser; import java.io.BufferedOutputStream; import java.io.FileOutputStrea ...
- mysql show commands
a. show tables或show tables from database_name; -- 显示当前数据库中所有表的名称b. show databases; -- 显示mysql中所有数据库的 ...
- 基于动态库的C++插件开发模型
基类为抽象类,在不同的动态库中实现不同的执行行为,但是每个动态库要提供2个统一的方法:1) baseClass * create(); 2) void destroy( baseClass* );,调 ...
- [转]Unable to build: the file dx.jar was not loaded from the SDK folder!
本文转自:http://www.developerbits.com/tag/unable-to-build-the-file-dx-jar-was-not-loaded-from-the-sdk-fo ...
- [转]分布式系统为什么需要 Tracing?
分布式系统为什么需要 Tracing? 先介绍一个概念:分布式跟踪,或分布式追踪. 电商平台由数以百计的分布式服务构成,每一个请求路由过来后,会经过多个业务系统并留下足迹,并产生对各种Cach ...
- 第十四篇、Ajax与Json
1.Ajax的核心知识 1.1 XMLHttpRequest对象 function loadName(){ var xmlHttp; if(window.XMLHttpRequest){ xmlHtt ...
- java集合 collection-list-LinkedList
import java.util.*; /* LinkedList:特有方法: addFirst(); addLast(); getFirst(); getLast(); 获取元素,但不删除元素.如果 ...
- There is no Action mapped for namespace [/] and action name [user] associated with context path
从c++转到java,初学struts,竟然碰到一个因写错单词而造成的错误,structs --> struts
- 374. Guess Number Higher or Lower
We are playing the Guess Game. The game is as follows: 我们来玩一个游戏,规则如下: I pick a number from 1 to n. Y ...
- HeadFirst设计模式-前言总结
1 鸭子抽象类 class Duck { quack(); swim(); virtual display()=0 }; 现在如果让鸭子能够飞 class Duck { quack(); swim() ...