zoukankan      html  css  js  c++  java
  • CSS 实现等高布局以及多行文本垂直居中

    将display属性设置为table-cell,具有table的特点。

    1.同行等高。

    2.宽度自动调节。

    相当于表格是td,

    <style type="text/css">
        .classtd{padding:10px; margin:10px; border:1px solid #ccc; vertical-align: top;}
        .classtd{display:table-cell; border-color:#cc0;}
    </style>
    <div class="classtd"><p>大人。<br />好好学习天天向上 做好技术,做好产品为人民服务<br />做好技术,做好产品为人民服务<br />做好技术,做好产品为人民服务<br />做好技术,做好产品为人民服务</p> </div> <div class="classtd"><p>我和左边等高
    我和左边我
    和左边等高等
    高我和左边等高</p></div>

      

    大人。
    好好学习天天向上 做好技术,做好产品为人民服务
    做好技术,做好产品为人民服务
    做好技术,做好产品为人民服务
    做好技术,做好产品为人民服务

    我和左边我
    和左边等高等
    高我和左边等高

    如果要实现垂直居中的话 可以与 vertical-align:middle结合使用即可

    <style type="text/css">
        .classtd{ display: table-cell; padding:10px;margin:10px;border:1px solid #ccc;}
        .classtd div{ display: inline-block; vertical-align: middle;}
    </style>
    <div class="classtd">
        <div style="100px;background: #639146; color:#fff;">垂直居中fsdfsd</div>
        <div style="100px;background: #2B82EE; color:#fff;">垂直居中qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</div>
    <div style="100px;background: #F57900; color:#fff;">垂直居中qqqqqqqqqqq</div> <div style="100px;background: #BC1D49; color:#fff;">处置居中qqqqqqqqqqqq</div> </div>
    垂直居中fsdfsd
    垂直居中qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
    垂直居中qqqqqqqqqqq
    处置居中qqqqqqqqqqqq

     上面看出三个方块已经垂直居中了

  • 相关阅读:
    RSA 与 DSA
    atlassian
    Cygwin
    windows下编写的Shell脚本在Linux下运行错误的解决方法
    NSKeyValueObserving(KVO)
    UIBezierPath 的使用介绍
    Objective
    Objective-C 内存管理原则
    Mac OSX 快捷键&命令行总览
    浅析Objective-C字面量
  • 原文地址:https://www.cnblogs.com/dubaokun/p/3411495.html
Copyright © 2011-2022 走看看