zoukankan      html  css  js  c++  java
  • 实现多行为本垂直居中

    方法总结:

    高度固定,内部文字不定,实现文字垂直居中

    1 使用table

    html

    <div class="text">
        <table>
            <tr>
                <td>
                    多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;
                    多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;
                    多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;
                    多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;
                </td>
            </tr>
        </table>
    </div>

    css

    .text {
                border: 1px solid red;
                padding: 10px;
                width: 600px;
            }
            .text table{
                height: 500px;
            }

    2 使用display:table

    html

    <div class="text">
        <div>
            <span>
                多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;
                多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;
                多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;
                多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;
            </span>
        </div>
    </div>

    css

    .text {
                display: table;
                width:600px;
                height:300px;
                border: 1px solid red;
    
            }
            .text div{
                display: table-cell;
                vertical-align: middle;
            }

    3 利用line-height实现多行文本垂直居中

    html

    <div class="text">
        <span>
            多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;
            多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;
            多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;
            多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;
        </span>
    </div>

    css

    .text {
                width:600px;
                line-height:300px;
                border: 1px solid red;
            }
            .text span{
                display: inline-block;
                line-height: normal;
                vertical-align: middle;
            }

    高度不固定实现多行文本垂直居中

    html

    <div class="text">
        多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;
        多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;
        多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;
        多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;多行文本垂直居中;
    </div>

    css

    .text {
                padding:20px;
                width:600px;
                border: 1px solid red;
            }
  • 相关阅读:
    2019年中国高校计算机大赛
    2019年华北五省(市、自治区)及港澳台大学生计算机应用大赛
    2019年(第12届)中国大学生计算机设计大赛
    2020移动开发竞赛
    2019年华北五省(市、自治区)及港澳台大学生计算机应用大赛
    Android 开发者指南
    Android :HangUp Notification 横幅通知
    HBU E-mobile
    Android Q is Android 10
    Android Studio 3.5(Last updated 7/29/2019)
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/6378923.html
Copyright © 2011-2022 走看看