zoukankan      html  css  js  c++  java
  • 常见的CSS文字居中显示

    1、利用line-height和vertical-align

    <div class="box">
        <span>测试文字</span>
    </div>
    .box{
         200px;
        height: 200px;
        overflow: hidden;
        background: #ccc;
        text-align: center;
    }
    .box span{
        vertical-align: middle;
        line-height: 200px;
    }
    

    2、利用display:table-cell实现水平垂直居中显示

    <div class="table">
        <span class="cell">测试文字测试文字测试文字测试文字</span>
    </div>
    .table{
         200px;
        height: 200px;
        overflow: hidden;
        background: #ccc;
    	display: table;
    }
    .cell{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    

    3、利用定位方式position+transform实现水平垂直居中显示

    <div class="box">
        <span>测试文字测试文字测试文字测试文字</span>
    </div>
    .box{
        position: relative;
         200px;
        height: 200px;
        overflow: hidden;
        background: #ccc;
    }
    .box span{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    

    4、利用display:flex

    <div class="flex">
        <span>测试文字测试文字测试文字测试文字</span>
    </div>
    .flex{
         200px;
        height: 200px;
        display:flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
    

    5、利用display:box

    <div class="flex">
        <span>测试文字测试文字测试文字测试文字</span>
    </div>
    .flex{
         200px;
        height: 200px;
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: center;
        -webkit-box-align: center;
    }
    

    本文来自博客园,作者:小基狠努力啊,转载请注明原文链接:https://www.cnblogs.com/ylh188/p/14983953.html

  • 相关阅读:
    audio_音频
    调试C++NPv2_TP_Reactor_Log_Server程序
    2019 SDN大作业(咕咕咕队)
    第09组 Beta版本演示
    第09组 Beta冲刺(4/4)
    第09组 Beta冲刺(3/4)
    2019 SDN上机第7次作业
    第09组 Beta冲刺(2/4)
    第09组 Beta冲刺(1/4)
    2019 SDN上机第6次作业
  • 原文地址:https://www.cnblogs.com/ylh188/p/14983953.html
Copyright © 2011-2022 走看看