字母 X — CSS 举足轻重的角色

  • 字母 x 的下边缘是基线
  • x-height：就是字母 x 的高度，基线和等分线之间的距离

line-height

  • div 高度是由 line-height 决定的。
  • 非替换元素的纯内联元素，可视高度完全由 line-height 决定。与 padding、border 属性没有关系。

vertical-align

  • 设置 vartical-align 为正值相对基线上移，负值相对基线下移。
  • vertical-align 的百分比是相对于 line-height 计算的。
  • vertical-align 只能作用于内联元素和 display 为 table-cell 的元素。
  • table-cell 元素设置 vartical-align 垂直居中对齐的是子元素，但是其作用的不是子元素，而是 table-cell 元素自身。就算 table-cell 元素的子元素是一个块级元素，也一样能让其有各种垂直对齐的表现。

线性类属性值

inline-block 与 baseline

vertical-align 默认 baseline，内联元素就是字符 x 的下边缘，对于替换元素则是替换元素的下边缘。对于 inline-block 元素，如果里面没有内联元素，或者 overflow 不是 visible 的元素，则该元素的基线是其 margin 底边缘；否则其基线就是元素里面最后一行内联元素的基线。

vertical-align: top/bottom

vertical-align: top 就是垂直上边缘对齐，具体定义如下：

  • 内联元素：元素的底部和当前行框盒子的顶部对齐。
  • table-cell 元素：元素底 padding 边缘和表格行的顶部对齐。

vertical-align: bottom 就是下边缘对齐。

vertical-align: middle 与近似垂直居中

  • 内联元素：元素的垂直中心点和行框盒子基线往上 1/2 x-height 除对齐。
  • table-cell 元素：单元格填充盒子相对于外面的表格行居中对齐。

文本类属性值

  • vertical-align:text-top：盒子的顶部和父级内容区域的顶部对齐。
  • vertical-align:text-bottom：盒子的底部和父级内容内容区域的底部对齐。

上下标属性

  • vertical-align:super：提高盒子的基线到父级合适的上标基线位置。
  • vertical-align:sub：降低盒子的基线到父级合适的下标基线位置。

基于 vertical-align 属性的水平居中弹框

  1. <div class="container">
  2.   <div class="dialog"></div>
  3. </div>
  1.  .container {
  2.      position: fixed;
  3.      top: 0;
  4.      right: 0;
  5.      bottom: 0;
  6.      left: 0;
  7.      background-color: rgba(0, 0, 0, .5);
  8.      text-align: center;
  9.      font-size: 0;
  10.      white-space: nowrap;
  11.      overflow: auto;
  12.  }
  14.  .container::after {
  15.      content: '';
  16.      display: inline-block;
  17.      height: 100%;
  18.      vertical-align: middle;
  19.  }
  21.  .dialog {
  22.      display: inline-block;
  23.      vertical-align: middle;
  24.      text-align: left;
  25.      font-size: 14px;
  26.      white-space: normal;
  27.  }

参考

【1】CSS 世界@张鑫旭