zoukankan      html  css  js  c++  java
  • 垂直居中-父元素高度确定的单行文本

    我们在实际工作中也会遇到需要设置垂直居中的场景,比如好多报纸的文章标题在左右一侧时,常常会设置为垂直居中,为了用户体验性好。

    这里我们又得分两种情况:父元素高度确定的单行文本,以及父元素高度确定的多行文本。

    本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢?

    父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 )。

    line-height 与 font-size 的计算值之差,在 CSS 中成为“行间距”。分为两半,分别加到一个文本行内容的顶部和底部。

    这种文字行高与块高一致带来了一个弊端:当文字内容的长度大于块的宽时,就有内容脱离了块。

    如下代码:

    <div class="container">
        hi,rinpe!
    </div>

    css代码:

    <style>
    .container{
        height:100px;
        line-height:100px;
        background:#999;
    }
    </style>
    

      

  • 相关阅读:
    体验cygwin纪实
    播布客视频PIT专用播放器MBOO2015
    rpm基本命令参考
    rhel7.x配置本地yum
    mtr网络连通性测试
    Oracle下载汇聚
    Spring Cloud心跳监测
    Hystrix的用法
    Redis系列十:缓存雪崩、缓存穿透、缓存预热、缓存更新、缓存降级
    dubbo异步调用三种方式
  • 原文地址:https://www.cnblogs.com/Rinpe/p/5559077.html
Copyright © 2011-2022 走看看