<!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. [Windows Server 2003] 手工创建安全网站

    ★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频.★ 本节我们将带领大家:手工创建安全站 ...

  2. Codeforces_765_D. Artsem and Saunders_(数学)

    D. Artsem and Saunders time limit per test 2 seconds memory limit per test 512 megabytes input stand ...

  3. Windows提高_2.3第三部分：内核区同步

    第三部分:内核区同步 等待函数(WaitForObject) 等待函数的形式 单个:WaitForSingleObject 多个:WaitForMultipleObjects 一个可以被等待的对象通常 ...

  4. netstat查看服务器连接数端口并发数

    简介 Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics),masquerade 连接,多播成员 (Multicast Member ...

  5. CAD与用户交互在图面上选择一个实体（com接口VB语言）

    主要用到函数说明: IMxDrawUtility::GetEntity 与用户交互到在图面上选择一个实体,详细说明如下: 参数 说明 [out] IMxDrawPoint** pPickPoint 返 ...

  6. 梦想CAD控件网页版线型

    增加线型 主要用到函数说明: _DMxDrawX::AddLinetype 增加一个线型定义.详细说明如下: 参数 说明 BSTR pszName 线型名 BSTR pszLineDefine 线定义 ...

  7. for循环，字典遍历（二）

    #通过列表值,定义一个字典,来获取key和value str_list = [1,3,5,7,9,'i',9,'o',7,'i'] str_dict = {} for i in str_list: # ...

  8. 浅谈java浅拷贝和深拷贝

    前言:深拷贝和浅拷贝的区别是什么? 浅拷贝:被复制的对象的所有变量都含有原来对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.换言之, 浅拷贝仅仅复制所考虑的对象,而不复制它所引用的对象.深拷 ...

  9. Linux 安装 MySQL 详解（rpm 包）

    说明:Linux 系统中软件的安装在 root 用户下进行,此安装方式为 rpm 包方式,安装的版本为:MySQL-5.6.25-1.linux_glibc2.5.x86_64.rpm-bundle. ...

  10. 【08】AngularJS XMLHttpRequest

    AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据. 读取 JSON 文件 以下是存储在web服务器上的 JSON 文件: ...