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. [Labview资料] labview事件结构学习

      编程的主要目的是为了实现用户的某种功能,用户通过用鼠标.键盘.程序内部等触发某种程序动作,从而达到某种结果,这些操作都被称作为事件,LabVIEW中相应这些事件最常用的结构就是“事件结构”.事件结 ...

  2. Cocos2d的特性

    从本质上说,Cocos2d是一个图形引擎,封装了复杂的图形接口,通过抽象出精灵.动作等概念,降低了游戏开发难度,简化了开发过程.Cocos2d-x为保证游戏能方便地移植到不同平台上,又在此基础上做了很 ...

  3. PHP安全外延

    接下来,我们讲一下:php语言与Apache等中间.MySQL等数据库结合使用时所产生的一些安全问题. 1.文件解析漏洞分析 2.编码注入漏洞分析 3.is_numeric漏洞分析

  4. Objhdu2001java

    计算两点间的距离 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  5. Android 开发之自定义Dialog及UI的实现

    我们在开发中,经常会自定义Dialog,因为原生的AlertDialog无法满足我们的需求,这个时候就需要自定义Dialog,那么如何自定义呢,其实不难,就是有点繁琐而已.也就是自定义一个UI的xml ...

  6. Linux服务器常用性能监控命令汇总

    1.ifconfig 网卡数目.ip地址.Mac地址.MTU大小 eth0 Link encap:Ethernet HWaddr 00:0d:3a:50:12:e9 inet addr:10.0.0. ...

  7. Controller里写自己需要的Action，参数的名字必须和路由设置的参数名一致

    Controller里写自己需要的Action,参数的名字必须和路由设置的参数名一致,如果参数不一致,传过去为null

  8. javascript创建对象的7种方式

    /*1.工厂模式*/ function createPerson(name,age,job) { var o = new object(); o.name = name; o.age = age; o ...

  9. Android客户端中Bitmap的下载过程和缓存机制

    加载流程: if(内存命中){      从内存中读取 }else{      create AsyncTasks,task中的多个Runnable是通过堆栈先进后出的方式来调度,而非队列式的先进先出 ...

  10. SqlServer 三级联动、递归表

    SqlServer 省市县三级联动 三张表递归合并成一张表sql如下: insert into table2(area_name,area_parent_id) select province,'0' ...