zoukankan      html  css  js  c++  java
  • vertical-align 属性

    vertical-align属性与垂直居中

         

    下面来详细介绍下vertical-align这个属性以及实现垂直居中的若干方法。

    1、根据W3C Spec 中对 vertical-align属性的定义:

        This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

    ,这句话的解释就是这个vertical-align 属性应用于行内元素。

    2、什么是line box?

        The rectangular area that contains the boxes that form a line is called a line box.,这句话解释了行内元素为线性排列的元素即行内元素。

     3、垂直居中是相对于垂直高度而言的,既然我们要垂直居中,我们需要了解line-box,已知height对inline元素无效,那么line box的高度是怎么计算的呢?

        The height of a line box is determined by the rules given in the section on line height calculations.

      一个line box的高度是的计算方式如下

            line box中的每一个行内元素都将加入到计算过程,如果是元素inline的则取其line-height的值,如果元素是inline-block或者是inline-table则取其margin-box的高度,最后这些值的最大值,即为line box的高度了。

  • 相关阅读:
    发布时间 sql语句
    Excel中 查找重复数据
    身份证正则表达式
    (转)C#中的委托与事件
    C#中的ForEach
    Ajax请求中,contentType和dataType的区别
    让IIS支持PUT和Delete请求的方法
    Vue.js事件修饰符
    JS阻止默认行为
    关于bindinglist的一点小问题
  • 原文地址:https://www.cnblogs.com/zhishiyv/p/14333511.html
Copyright © 2011-2022 走看看