zoukankan      html  css  js  c++  java
  • CSS-文本垂直居中

    文本水平居中可以将text-align设置为center即可,垂直居中的话如果是单纯的设置vertical-align是没办法单独设置成功的,垂直居中的文字分为单行文本和多行文本,主要是两种不同的实现方式。

    单行文本垂直居中

    设置line-height和height高度一样即可:

        .outer-line {
            border: 1px solid red;
            height: 200px;
            line-height: 200px;
             200px;
        }
        <div class="outer-line">
            博客园-FlyElephant
        </div>
    

    多行文本垂直居中

    通过table和table-cell的方式实现垂直居中:

        <div class="outer-table">
            <div class="inner">
                博客园-FlyElephant 原文地址:http://www.cnblogs.com/xiaofeixiang/
            </div>
        </div>

    样式设置:

        .outer-table {
            border: 1px solid red;
            height: 200px;
             200px;
            margin-top: 20px;
            display: table;
        }
        
        .inner {
            display: table-cell;
            vertical-align: middle;
        }
  • 相关阅读:
    @loj
    @loj
    @划水记@ THUWC2020 (?)
    @codeforces
    @loj
    Spark设计理念与基本架构
    Spark源码解析
    Spark Submitting Applications浅析
    Spark RDD基本概念与基本用法
    Storm基本原理概念及基本使用
  • 原文地址:https://www.cnblogs.com/xiaofeixiang/p/5005587.html
Copyright © 2011-2022 走看看