CSS垂直居中完美有用实例
<!DOCTYPE HTML>
<html>
<head>
<meta meta charset="utf-8">
<title>CSS垂直居中</title>
<style type="text/css" media="all">
body{color:black;background-color:white;padding:50px;font-size: 12px;line-height:16px;font-family:arial; color: #1E346E;}
* {margin: 0;padding:0;border-width: 0;}
.list{vertical-align: middle;width:640px;margin-bottom: 1px;border: solid 1px #00a0da;background-color:#F0F5FF; }
.list:hover{background-color:#d9e7f5;}
/*----------set vertical align middle----------*/
.list p,.list b { vertical-align: middle;display: -moz-inline-stack;display:inline-block;zoom:1;*display:inline;}
.list p { padding:10px;}
/*----------set min-height----------*/
.list b { height:52px;width:1px;overflow:hidden;margin-left:-1px;background-color:#009Cd0;}
</style>
</head>
<body>
<div class="list"><b> </b><p style="width:80px;">first class</p><p style="width:160px;">Can be modified</p><p style="width:160px;">Can be refunded.</p><p
style="width:160px;">Can be endorsed</p></div>
<div class="list"><b> </b><p style="width: 80px;">Economy class</p><p style="width:160px;">Can be modified</p><p style="width:160px;">Can be refunded.</p><p
style="width:160px;">Can be endorsed</p></div>
<div class="list"><b> </b><p style="width:80px;">23% off Economy class</p><p style="width:160px;">One free change permitted within same class if available; further
changes charged 10% of fare. Passengers must go to CA ticketing office to process fee-based changes.</p><p style="width:160px;">10% of fare charged. </p><p
style="width:160px;">Can not be endorsed</p></div>
<div class="list"><b> </b><p style="width:80px;">-6% off Economy class</p><p style="width:160px;">Free change permitted within same class if available at least 4 days
prior to departure.</p><p style="width:160px;">20% of fare charged (minimum CNY50 charge).</p><p style="width:160px;">Can not be endorsed</p></div>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
</body>
</html>
CSS垂直居中完美有用实例的更多相关文章
- 完美实现CSS垂直居中的11种方法
在做前端项目时CSS的水平居中我们经常使用,但有时还会用到CSS垂直居中,对于小白来说这个就有些难度了,下面看一下我是如何实现的 本人前端小白,正在做一个小程序开发的项目,css样式调整搞的头都大了. ...
- 最常用的css垂直居中方法
css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...
- CSS学习摘要-定位实例
CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...
- C++11 变长模版和完美转发实例代码
C++11 变长模版和完美转发实例代码 #include <memory>#include <iostream>#include <vector>#include ...
- CSS垂直居中指南
大概整理下css中的垂直居中问题 主要分两大类 1 知道块元素尺寸,一般就是指知道元素高度. 方法一:最简单的,类比水平居中. 思路:子元素设置为absolute; top bottom都设置为0 ...
- PHP.5-DIV+CSS布局网站首页实例
DIV+CSS布局网站首页实例 网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html[页头.页脚.侧边栏和内容区域] #避免各浏览器对CSS ...
- HTML与CSS简单页面效果实例
本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...
- CSS 伪类 (Pseudo-classes)实例
CSS 伪类 (Pseudo-classes)实例CSS 伪类用于向某些选择器添加特殊的效果在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访 ...
- CSS 内边距 (padding) 实例
CSS 内边距 (padding) 实例元素的内边距在边框和内容区之间.控制该区域最简单的属性是 padding 属性. CSS padding 属性定义元素边框与元素内容之间的空白区域.CSS 内边 ...
随机推荐
- Props、State、Refs 与表单处理
我们也了解到 React Component 事实上可以视为显示 UI 的一个状态机(state machine),而这个状态机根据不同的 state(透过 setState() 修改)和 props ...
- Android Bitmap转换WebP图片导致损坏的分析及解决方案
背景 作为移动领域所力推的图片格式,WebP图片在商业领域证明了其应有的价值.基于其他格式的横向对比,其在压缩性能表现,及还原度极为优秀,节省大量的带宽开销.基于可观的效益比,团队早前已开始磋商将当前 ...
- Apache JServ protocol服务 怎么关闭?
Apache JServ protocol = AJP 解决方案:修改tomcat 的service.xml配置文件 将 <Connector port="8009" ...
- Android yuv转Bitmap
YuvImage image = new YuvImage(data, ImageFormat.NV21, size.width, size.height, null); if(image!=nu ...
- mysql 存储引擎学习
现在我们常用的MySQL存储引擎主要是两种:InnoDB and MyISAM. 1.MyISAM 执行效率高 不支持事务 不支持外键 每个MyISAM在磁盘上存储成3个文件,其中文件名和表名都相同, ...
- C/c++中 数组全局变量的定义声明 与 引用声明
数组声明一次,所有的 定义声明 有切仅有一次! 别人遇到的问题如下: 在声明定义时,定义数组如下: int G_glob[100]; 在其他文件引用时声明如下: int *G_glob; 这样的操 ...
- C语言中结构体大小计算
1.普通结构体 struct student { char sex; char a; char b; int age; char name[100]; }; 该结构体大小为108 解答:1.先算str ...
- mybatis 使用参数
Parameter 1. 传入简单类型 JAVA代码: public User get(Long id) { return (User) getSqlSession().selectOne(&q ...
- springmvc学习及源码地址
http://jinnianshilongnian.iteye.com/blog/1634096
- java面试题链接
http://blog.csdn.net/jackfrued/article/details/17339393