• inline-block的垂直居中


    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: 0;padding:0;border- 0;}
                 .list{vertical-align: middle;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;1px;overflow:hidden;margin-left:-1px;background-color:#009Cd0;}
            </style>
        </head>
        <body>
                <div class="list"><b>&nbsp;</b><p style="80px;">first class</p><p style="160px;">Can be modified</p><p style="160px;">Can be refunded.</p><p style="160px;">Can be endorsed</p></div>
                <div class="list"><b>&nbsp;</b><p style=" 80px;">Economy class</p><p style="160px;">Can be modified</p><p style="160px;">Can be refunded.</p><p style="160px;">Can be endorsed</p></div>
                <div class="list"><b>&nbsp;</b><p style="80px;">23% off Economy class</p><p style="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="160px;">10% of fare charged. </p><p style="160px;">Can not be endorsed</p></div>
                <div class="list"><b>&nbsp;</b><p style="80px;">-6% off Economy class</p><p style="160px;">Free change permitted within same class if available at least 4 days prior to departure.</p><p style="160px;">20% of fare charged (minimum CNY50 charge).</p><p style="160px;">Can not be endorsed</p></div>
        </body>
    </html>
    示例代码

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

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

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

  • 相关阅读:
    我爬了《流浪地球》十万个短评得出以下结论
    Activiti开发案例之代码生成工作流图片
    Activiti开发案例之activiti-app工作流导出图片
    用MySQL语法建 一个学生表,包括学生姓名、性别、年龄、班级信息。
    事务是什么,以及事务四个特性
    精选30道Java笔试题解答
    父类和子类的构造方法的调用顺序
    Java的修饰符
    volatile修饰符
    Java中普通代码块,构造代码块,静态代码块区别及代码示例
  • 原文地址:https://www.cnblogs.com/haimingpro/p/4171921.html
Copyright © 2020-2023  润新知