<!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. MFC_2.7 树控件的基本使用

    树控件的基本使用 1.添加控件设置变量绑定 2.添加数据 HTREEITEM RootNode1 = m_TreeCtrl.InsertItem(L"北京"); HTREEITEM ...

  2. Python的伪造数据库：Faker

    faker 是一个可以让你生成伪造数据的Python包,在软件需求.开发.测试过程中常常需要利用一些假数据来做测试,这种时候就可以使用 Faker 来伪造数据从而用来测试. 一.Faker安装 pip ...

  3. 搭建Cookie池

    很多时候我们在对网站进行数据抓取的时候,可以抓取一部分页面或者接口,这部分可能没有设置登录限制.但是如果要抓取大规模数据的时候,没有登录进行爬取会出现一些弊端.对于一些设置登录限制的页面,无法爬取对于 ...

  4. pringboot开启找回Run Dashboard

    代码中加入 <option name="configurationTypes"> <set> <option value="SpringBo ...

  5. 服务器 获取用户 真实ip

    在有代理的情况下,因为要代替客户端去访问服务器,所以,当请求包经过反向代理后,在代理服务器这里这个IP数据包的IP包头做了修改,最终后端WEB服务器得到的数据包的头部源IP地址是代理服务器的IP地址. ...

  6. 代码静态分析工具-splint的学习与使用[转]

    代码静态分析工具--splint的学习与使用[转] 引言 最近在项目中使用了静态程序分析工具PC-Lint,体会到它在项目实施中带给开发人员的方便.PC-Lint是一款针对C/C++语言.window ...

  7. 【webpack插件使用】在开发中快速掌握并使用Webpack构建web应用程序

    1.webpack-dev-server插件的基本使用 入门程序 const path = require('path'); // 导出一个Webpack的配置对象(通过node中的模块操作,向外暴露 ...

  8. 洛谷——P3173 [HAOI2009]巧克力

    P3173 [HAOI2009]巧克力 题目描述 有一块n*m的矩形巧克力,准备将它切成n*m块.巧克力上共有n-1条横线和m-1条竖线,你每次可以沿着其中的一条横线或竖线将巧克力切开,无论切割的长短 ...

  9. 54.string field聚合以及fielddata原理初探

    主要知识点: 直接对分词的term进行聚合后果 设置fielddata=true 直接用.keyword进行聚合 doc value 的性能问题     一.直接对分词的term进行聚合后果     ...

  10. 整理推荐比较好用的具有书签搜索功能的chrome插件

    平时在整理学习chrome插件的过程中,经常会去试用各种大家推荐的插件.在去年我们的一篇文章:推荐六款好用的书签收藏夹剪藏型管理插件.这里面介绍的是收藏书签的插件.而随着我们使用chrome越来越频繁 ...