inline-block和inline都是不需要浮动就可以成行的，但是他们成行的效果不同。

inline和浮动中的block是顶着上边，inline-block是像被一根绳子从垂直方向的中心穿过去。

这个被绳子串着居中的效果却是很多design认为很“美”的。。

要在以前，没有inline-block的时代，我们可能会用table来满足需求，但现在，不需要js也不需要table：

<!DOCTYPE HTML>

<html>

    <head>

        <meta meta charset="utf-8">

        <title>Demo</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: ;padding:;border-width: ;}

             .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:;*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>&nbsp;</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>&nbsp;</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>&nbsp;</b><p style="width:80px;">% off Economy class</p><p style="width:160px;">One free change permitted within same class if available; further changes charged % of fare. Passengers must go to CA ticketing office to process fee-based changes.</p><p style="width:160px;">% of fare charged. </p><p style="width:160px;">Can not be endorsed</p></div>

            <div class="list"><b>&nbsp;</b><p style="width:80px;">-% off Economy class</p><p style="width:160px;">Free change permitted within same class if available at least  days prior to departure.</p><p style="width:160px;">% of fare charged (minimum CNY50 charge).</p><p style="width:160px;">Can not be endorsed</p></div>

    </body>

</html>

示例代码

基本上只要是inline-block的盒模型，无浮动，文字部分不要设高度，加个vertical-align:middle,zoom:1就搞定了。

比如左边是一个图片，右边是一个图片，中间是文字，文字一行乃至n行，图片都是垂直居中的。

这下那些强迫症患者满意了。

inline-block的垂直居中的更多相关文章

  1. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  2. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

  3. inline, block, and inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  4. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  5. inline,block,inline-block解析

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  6. inline-block,inline,block,table-cell,float

    float:left ---------------------------------------------------------------------------------------- ...

  7. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  8. CSS 概念 Block Inline Containing block

    Block 元素 包括 "block-level box," "block container box," and "block box" ...

  9. [CSS3] CSS Display Property: Block, Inline-Block, and Inline

    Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...

  10. CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

随机推荐

  1. 从Swap函数谈加法溢出问题

    1.      初始题目 面试题:). 这个题目太经典,也太简单,有很多人都会不假思索结出答案: //Code 1 void Swap(int* a, int* b) { *a = *a + *b; ...

  2. AOP 的利器：ASM 3.0 介绍

    引言 什么是 ASM ? ASM 是一个 Java 字节码操控框架.它能被用来动态生成类或者增强既有类的功能.ASM 可以直接产生二进制 class 文件,也可以在类被加载入 Java 虚拟机之前动态 ...

  3. hdu2091JAVA

    空心三角形 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  4. Android Studio: 我解决的DEX出错。

    今天开始使用了Android Studio.感觉很方便,很强大.因为它还集成了SVN,GIT等版本管理工具. 由于工程在CheckOut下来后想直接在终端上运行,在引入外部jar包之后开始运行啦,结果 ...

  5. JDBC操作数据库 封装好的工具类

    mysql sqlserver oracle 数据库的驱动jar包http://download.csdn.net/download/csdn576038874/8833683package cn.h ...

  6. iOS开发中常用的手势---边缘手势

    说明:以下方法是开发中使用的方法,有什么不对的或者好的方法,请多多指教! 此处的边缘手势是用来控制左侧抽屉视图的弹出以及收回. 添加手势 : 页面上有多个手势时需要遵循 UIGestureRecogn ...

  7. 30、ADO.NET、事务、DataSet

    ADO.NET ADO.NET是一组用于和数据源进行交互的面向对象类库.通常数据源是数据库,但也可以是文本文件.Excel表格.XML文件. 说白了就是使用.net操作数据库的一套类库. ADO.NE ...

  8. CSS权威指南-第三版--读书笔记

    第一章:CSS和文档 html是结构化语言,css是样式语言,html主要用来被强大的搜索引擎更好的索引,更好的让一个盲人通过语音浏览器来了解我们的网页,这也就是为什么说html是结构话语言,因为这是 ...

  9. css-a:visited

    如下代码: <a href="#">链接地址</a> 如果属性 href的设置为'#',则鼠标滑过(即使没有点击',也算成'visited'.而对于 hre ...

  10. JS 定時刷新父類頁面

    function timeCount() { var url = "MAC.aspx"; parent.location.href = url; } function beginC ...