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. yo bootstrap mui 使用对比

    昨天晚上 又被问及职业发展方向,提及我的老本行css,切了几年的页面,近两年投入进css的时间屈指可数,被问及之前公司用的yo框架 对比业界内其他css 框架的优势. 1. yo模块化,碎片化  可自 ...

  2. 【Android】知晓当前是哪一个活动

    首先需要新建一个 BaseActivity 继承自Activity,然后在 BaseActivity 中重写 onCreate()方法,如下所示:public class BaseActivity e ...

  3. 复杂对象创建终结者(Builder Pattern)

    捣鼓了很长时间,终于对建造者模式有初步理解,现在写篇记录下.缘起就是创建的对象比较复杂,需按功能分散.类似造一辆汽车,作为汽车厂家,你需要造车身,造轮胎等,精髓在于领导者(Director),领导者指 ...

  4. 传送门（portal）

    Linux: #RHEL/CentOS/fedora系列为主 Basis: Commands: Services: SpamAssassin: Tomcat: Hadoop: Hive: Pig: Z ...

  5. asp.net 使用IHttpModule 做权限检查 登录超时检查（转）

    IHttpModule 权限 检查 登录超时检查 这样就不需要每个页面都做一次检查 也不需要继承任何父类. using System;using System.Collections.Generic; ...

  6. 日文“表” php 会报错

    php遇到很奇怪的问题,文字“表”会报错,并且是属于编译错误的问题. 单纯的输出: echo " 表 "; 会直接报错. 可是只要在中间加点东西,就可以解决这个问题,就算是空格都可 ...

  7. JQM 页面滚动加载

    1 应用场景:文章比较长,只加载部分,当到页面底部触发获取更多数据. 2 如图,监听滚动条的位置,触发事件,转化为求X的长度, 3 实例代码: //滚动条到底加载更多 $(document).on(& ...

  8. java - import *

    以前看过很多视频,现在发觉很多讲师讲的有些地方是错的,在这里就说一下 import *,例如: import java.util.*的时候,表示的是将文件中使用到的类(而不是全部类)导入,例如在imp ...

  9. oracle数据库误删恢复方法

    一.如果只是误删部分数据或者某条数据可以通过 1.select * from 误删除的表明 as of timestamp to_Date('恢复年月日  时分秒', '恢复时间格式')       ...

  10. iOS相关，过年回来电脑上的证书都失效了，解决方法。

    今天发了个问题,就是关于电脑上的证书都失效的问题,就这个问题的解决方法如下:https://segmentfault.com/q/1010000004433963 1,按照链接下载,https://d ...