zoukankan      html  css  js  c++  java
  • 垂直居中

    垂直居中-父元素高度确定的单行文本

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

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

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

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

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

    运行如下:

    垂直居中-父元素高度确定的多行文本(方法一)

    父元素高度确定的多行文本、图片等的竖直居中的方法有两种:

    方法一:使用插入 table  (包括tbody、tr、td)标签,同时设置 vertical-align:middle

    css 中有一个用于竖直居中的属性 vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用。

    运行结果如下:

    垂直居中-父元素高度确定的多行文本(方法二)

     chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell(设置为表格单元显示),激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式, 兼容性比较差。

  • 相关阅读:
    MySQL常用函数及逻辑运算
    博客主题2
    TCPIP详解第1卷1.3TCPIP分层1.4互联网的地址1.5域名系统1.6封装
    删除数组中满足特定需求的数字
    自定义简洁浏览器主页
    Matlab图像处理函数:regionprops
    连通域的质心
    Matlab的GUI参数传递方式总结
    retrifit
    association ,collection
  • 原文地址:https://www.cnblogs.com/pmlyc/p/6297994.html
Copyright © 2011-2022 走看看