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. servlet和手动创建servlet，断点调试

    1.    什么是Servlet Servlet是一种用Java语言编写的Web应用组件 Servlet主要用于动态网页输出,扩展了Web服务器的功能 Servlet由Servlet容器进行管理 2. ...

  2. CCControlSlider和CCControlStepper用法

    一开始,size的大小是系统分配.玩家可以通过setDefaultSize()更改值 1. CCControlSlider用法 CCSpriteFrameCache::sharedSpriteFram ...

  3. Bash判断文件是否存在

    #!/bin/bash if [ -f filename ]; then echo 'file exist' else echo 'file not exist' fi

  4. Java Post 数据请求和接收

    这两天在做http服务端请求操作,客户端post数据到服务端后,服务端通过request.getParameter()进行请求,无法读取到数据,搜索了一下发现是因为设置为text/plain模式才导致 ...

  5. MYSQL 基础操作

    1.MySQL基础操作 一:MySQL基础操作 1:MySQL表复制 复制表结构 + 复制表数据 create table t3 like t1; --创建一个和t1一样的表,用like(表结构也一样 ...

  6. file的name值

    在picturelibrary中取一张jpg文件, 其Name值为  "NoThumbnail.jpg",注意后面的.jpg             foreach (SPFile ...

  7. 一封给“X教授”的回信(讨论Socket通信)

    转载:http://www.cnblogs.com/tianzhiliang/archive/2011/03/02/1969187.html 前几天"X教授"发Email与我讨论S ...

  8. ubuntu下配置java环境变量

    1.官网下载linux对应的jdk安装包tar.gz 2.filezilla上传tar.gz到对应ubuntu目录test下(见上一篇) 3.解压:tar -zcvf XXX.tar.gz 4.修改解 ...

  9. JS 同源策略

    对于任何基于WEB的应用,最重要的就是安全性.JS中有各种安全检查以防止恶意脚本攻击你的机器,其中一些特定的安全手段在各种浏览器中都有采用.如:Mozilla有个完全独特的完全模型,涉及到了签署脚本和 ...

  10. ScheduleThreadPoolExecutor源码分析

    ScheduleThreadPoolExecutor源码分析(一) Java中ScheduleThreadPoolExecutor主要用于执行延迟任务或者按照一定的频率执行任务.其中scheduleA ...