zoukankan      html  css  js  c++  java
  • CSS的vertical-align

    定义和用法

    vertical-align 属性设置元素的垂直对齐方式。

    说明

    该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表格中,这个属性会设置单元格框中的单元格内容的对齐方式。

    上面这段话,的确不是很好理解,没关系,我们先不用去管他,不过我们先要记住一个事情。

    只有元素属于inline或是inline-block ,vertical-align属性才会起作用。
    例如图片,按钮,单复选框,单行/多行文本框等HTML控件,只有这些元素默认情况下会对vertical-align属性起作用。

    我们继续来看看,vertical-align 可以取的值

    /* 关键值 */
    vertical-align: baseline;    /*默认。元素放置在父元素的基线上*/
    vertical-align: sub;         /*垂直对齐文本的下标*/
    vertical-align: super;       /*垂直对齐文本的上标*/
    vertical-align: text-top;    /*把元素的顶端与父元素字体的顶端对齐*/
    vertical-align: text-bottom; /*把元素的底端与父元素字体的底端对齐。*/
    vertical-align: middle;      /*把此元素放置在父元素的中部*/
    vertical-align: top;         /*把元素的顶端与行中最高元素的顶端对齐*/
    vertical-align: bottom;      /*把元素的顶端与行中最低的元素的顶端对齐*/
    
    /* 长度值 */
    vertical-align: 10em;
    vertical-align: 4px;
    
    /* 百分比值 */
    vertical-align: 20%;
    
    /* 全局值 */
    vertical-align: inherit;    /*规定应该从父元素继承 vertical-align 属性的值*/
    vertical-align: initial;    /*设置属性的初始值——浏览器的默认定义值*/ 
    
    vertical-align: unset;
    /*CSS 关键字 unset 是 关键字 initial 和 inherit的组合。 
    如果有继承父级样式,则将该属性重新设置为继承的值,如果没有继承父级样式,则将该属性重新设置为初始值。
    换句话说这个unset关键字会优先用inherit的样式,其次会应该用initial的样式。*/

    总结

    这次主要说了一些 vertical-align属性的基础的东西。 

    1、只有元素属于inline或是inline-block ,vertical-align属性才会起作用。
    2、vertical-align,取值是百分数值时,是相对于此标签继承的line-height值决定的。
    3、line-height,取值是百分数值时,是相对于当前的font-size值决定的。 

     

  • 相关阅读:
    宿主机无法访问CentOS7上Jenkins服务的解决办法
    415. Add Strings
    367. Valid Perfect Square
    326. Power of Three
    258. Add Digits
    231. Power of Two
    204. Count Primes
    202. Happy Number
    172. Factorial Trailing Zeroes
    171. Excel Sheet Column Number
  • 原文地址:https://www.cnblogs.com/lchsirblog/p/9505634.html
Copyright © 2011-2022 走看看