• 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值决定的。 

     

  • 相关阅读:
    html调用hadoop WebHDFS REST API
    推荐相关
    Resources of Studying Hadoop
    远程调试Hadoop(转)
    MYSQL复制的几种模式
    Hadoop实战第四章读书笔记
    FMS3系列(七):FMS案例开发视频聊天室
    Flex与.NET互操作系列文章
    使用FluorineFx Silverlight库实现Silverlight远程过程调用(RPC)
    修改 MySQL帐号密码,增加新用户
  • 原文地址:https://www.cnblogs.com/lchsirblog/p/9505634.html
Copyright © 2020-2023  润新知