inline-block的垂直居中

最新推荐文章于 2024-05-14 22:31:58 发布

weixin_30673611

最新推荐文章于 2024-05-14 22:31:58 发布

阅读量240

点赞数

原文链接：http://www.cnblogs.com/haimingpro/p/4171921.html

版权

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-width: 0;}
             .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:1;*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;">23% off Economy class</p><p style="width: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="width:160px;">10% of fare charged. </p><p style="width:160px;">Can not be endorsed</p></div>
            <div class="list"><b>&nbsp;</b><p style="width:80px;">-6% off Economy class</p><p style="width:160px;">Free change permitted within same class if available at least 4 days prior to departure.</p><p style="width:160px;">20% 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行，图片都是垂直居中的。

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

转载于:https://www.cnblogs.com/haimingpro/p/4171921.html

weixin_30673611

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
inline-block的垂直居中

inline-block和inline都是不需要浮动就可以成行的，但是他们成行的效果不同。inline和浮动中的block是顶着上边，inline-block是像被一根绳子从垂直方向的中心穿过去。这个被绳子串着居中的效果却是很多design认为很“美”的。。要在以前，没有inline-block的时代，我们可能会用table来满足需求，但现在，不需要js也不需要table：...
复制链接

扫一扫