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

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

  • 相关阅读:
    SpringCloud项目中使用Nacos作为配置中心
    SpringCloud项目中使用Nacos作为注册中心
    idea创建maven多模块Spring Boot项目
    Java代码中对IP进行白名单验证
    idea配置jdk
    win10配置jdk1.8环境变量
    shell 提示符样式设置
    整数转换成中文读法的字符串
    比较三段式软件版本号大小
    Windows7安装 nginx+php 后访问.php文件出现 “No input file specified.” 的解决办法
  • 原文地址:https://www.cnblogs.com/dubaokun/p/3411495.html
Copyright © 2011-2022 走看看