verticle-align

verticle-align

  • 常见场景是居中。尤其是form。
  • 在一些display情况复杂的情境下失效,转而用flex解决,所以该属性使用渐少

内容包括:

css1即有的,也要考虑浏览器支持
适用元素
取值
容易忽略的特性
新手疑惑点
他说:老司机的看法
业务联想
参考资料
详细请戳 这里
无法跳转时,请手动:http://gitlab.alibaba-inc.com/wn105798/accumulation/blob/master/css_vertical-align.md

支持

对于这个元素,Can I use是这么说的

CSS vertical-align property
This CSS property is supported in effectively all browsers (since IE6+, Firefox 2+, Chrome 1+ etc)

需要注意的是

  • 任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。
  • 由于IE6/7对inline box的解释不完善,同时对vertical-align的认识也可能会对您产生误导的,
  • 行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

适用元素

inline-level and table-cell elements. It also applies to ::first-letter and ::first-line.例如图片,按钮,单复选框,单行/多行文本框等HTML控件,只有这些元素默认情况下会对vertical-align属性起作用

取值 (行内(inline)元素)

多数值是相对于父元素:

baseline
元素基线与父元素的基线对齐。一些 可替换元素,比如

取值 (table-cell元素)

baseline (and sub, super, text-top, text-bottom, , and )
与同行单元格的基线对齐。
top
单元格的内边距的上边缘与行的顶端对齐。
middle
单元格垂直居中。
bottom
单元格的内边距的下边缘与行的底端对齐。

可以取负值。

其他

  • 默认值: baseline
  • 继承性: no

容易忽略的特性

  • 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
  • inherit 规定应该从父元素继承 vertical-align 属性的值。

新手疑惑点

  • 基线
    基线

  • 对比vertical-align:bottom和vertical-align:text-bottom,他们的表现似乎一样,实际上呢,这里的表现一致只是一个巧合而已,此话怎讲?要显示其差异很简单,添加一个line-height值,您就会看到不一样的地方了。

  • 实例:line-height:10px + vertical-align:bottom参见如下的CSS代码:

    .box{background:black; color:white; padding-left:20px; line-height:10px;}
    .dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:bottom;}
    

enter image description here
- 而如果vertical-align的属性是text-bottom呢?
- 实例五:line-height:10px + vertical-align:text-bottom参见如下的CSS代码:

    .box{background:black; color:white; padding-left:20px; line-height:10px;}
    .dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:text-bottom;}
  • 结果如下图:enter image description here
  • 可以看到,vertical-align:text-bottom属性的那个小方点的位置没有随着line-height的改变而改变,还是与文字的底部对齐。如果您细看关于text-bottom以及bottom属性的定义,您可以找到其表现的原因:text-bottom是与父标签的文字底部对齐,在这里也就是后面的“我是一个卡哇伊的文字”这段文字对齐,而bottom是相对于父标签的底部对齐,而如果您熟悉line box模型且对高度的本质有所了解,那么您就会明白为什么line-height会改变标签的bottom的位置了。

他说

inline水平元素受vertical-align属性而位置改变等不是因为其对vertical-align属性敏感或起作用,而是受制于整个line box的变化而不得不变化的

可以更多思考讨论的是

这里说点我的认识吧:vertical-align:middle属性的表现与否,仅仅与其父标签有关,至于我们通常看到的与后面的文字垂直居中显示那都是假象!

业务联想

  • vertical-align & text-align
  • vertical-align & line-height
  • vertical-align & display:table-cell

参考文档

  • http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

  • https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align

  • http://www.zhangxinxu.com/wordpress/2010/06/css-vertical-align%E7%9A%84%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%EF%BC%88%E4%BA%8C%EF%BC%89%E4%B9%8Btext-top%E7%AF%87/
  • http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

你可能感兴趣的:(前端)