<!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垂直居中完美有用实例的更多相关文章

  1. 完美实现CSS垂直居中的11种方法

    在做前端项目时CSS的水平居中我们经常使用,但有时还会用到CSS垂直居中,对于小白来说这个就有些难度了,下面看一下我是如何实现的 本人前端小白,正在做一个小程序开发的项目,css样式调整搞的头都大了. ...

  2. 最常用的css垂直居中方法

    css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...

  3. CSS学习摘要-定位实例

    CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...

  4. C++11 变长模版和完美转发实例代码

    C++11 变长模版和完美转发实例代码 #include <memory>#include <iostream>#include <vector>#include ...

  5. CSS垂直居中指南

    大概整理下css中的垂直居中问题 主要分两大类 1 知道块元素尺寸,一般就是指知道元素高度. 方法一:最简单的,类比水平居中. 思路:子元素设置为absolute;  top bottom都设置为0 ...

  6. PHP.5-DIV+CSS布局网站首页实例

    DIV+CSS布局网站首页实例 网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html[页头.页脚.侧边栏和内容区域] #避免各浏览器对CSS ...

  7. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  8. CSS 伪类 (Pseudo-classes)实例

    CSS 伪类 (Pseudo-classes)实例CSS 伪类用于向某些选择器添加特殊的效果在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访 ...

  9. CSS 内边距 (padding) 实例

    CSS 内边距 (padding) 实例元素的内边距在边框和内容区之间.控制该区域最简单的属性是 padding 属性. CSS padding 属性定义元素边框与元素内容之间的空白区域.CSS 内边 ...

随机推荐

  1. 主从 binlog_format 设置关系

    1. 主库是row,从库必须是row/mixed.如果是statement,主库有变更时,从库报如下错误(无论什么变更都报错,如insert/update/delete/alter等):     La ...

  2. Tcl之Read files for synthesis

    The following file is to read all design files into syntehsis tool automatically, like Cadence RTL C ...

  3. HDU_2844_(多重背包)

    Coins Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  4. DWARF调试格式的简介

    DWARF调试格式的简介 Michael J. Eager, Eager Consulting Feb, 2007 翻译:吴晖 2012年2月 如果我们可以编写确保能正确工作且永远不需要调试的程序,这 ...

  5. oracle 内连接 左外连接 右外连接的用法,(+)符号用法

    1. 内连接很简单 select A.*, B.* from A,B where A.id = B.id select A.*, B.* from A inner join B on A.id = B ...

  6. MFC 课程总结

    <基于MFC框架开发>马志国 1491989781 MFC课程的组成 1.1 MFC应用程序的组成部分.执行机制和执行流程(10.5天). 1.2 Windows平台上的数据库访问技术(1 ...

  7. java加载properties文件的六种方法总结

    java加载properties文件的六种方法总结 java加载properties文件的六中基本方式实现 java加载properties文件的方式主要分为两大类:一种是通过import java. ...

  8. str类型内置方法

    目录 str类型内置方法 用途 定义方式 常用操作和内置方法 优先掌握 需要掌握 了解 存一个值or多个值 有序or无序 可变or不可变 强化训练 str类型内置方法 用途 字符串数字.字母.下划线组 ...

  9. Python supprocess模块

    当我们需要调用系统的命令的时候,最先考虑的os模块.用os.system()和os.popen()来进行操作.但是这两个命令过于简单,不能完成一些复杂的操作,如给运行的命令提供输入或者读取命令的输出, ...

  10. 2.8 补充：shell脚本执行方法

    bash shell 脚本的方法有多种,现在作个小结.假设我们编写好的shell脚本的文件名为hello.sh,文件位置在/data/shell目录中并已有执行权限.   方法一:切换到shell脚本 ...