zoukankan      html  css  js  c++  java
  • 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行,图片都是垂直居中的。

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

  • 相关阅读:
    android 75 新闻列表页面
    android 74 下载文本
    android 73 下载图片
    android 72 确定取消对话框,单选对话框,多选对话框
    android 71 ArrayAdapter和SimpleAdapter
    android 70 使用ListView把数据显示至屏幕
    maven如何将本地jar安装到本地仓库
    Centos6.7搭建ISCSI存储服务器
    解决maven打包编译出现File encoding has not been set问题
    MySQL 解决 emoji表情 的方法,使用utf8mb4 字符集(4字节 UTF-8 Unicode 编码)
  • 原文地址:https://www.cnblogs.com/haimingpro/p/4171921.html
Copyright © 2011-2022 走看看