vertical-align 学习思考

vertical-align属性

CSS的属性vertical-align用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。
疑惑点:vertical-align取值究竟是如何取得?
我们用两个常见的属性值(top、bottom)来看下它取值的原理
1.属性值为top

top属性值

class=box2的文本进行顶部对齐,两个span文本顶部基线一致,那么class=box2的文本对齐的是不是就是class=box1顶部基线呢?我们继续看下面的例子。
2.属性值为bottom
bottom属性值

在本例中,又增加了一个span,对class=box2的文本进行底部对齐,发现其文本顶部对齐的是class=box3的底部基线
这就有点困惑了,class=box2的文本到底和谁对齐,以什么为参考呢?
仔细发现可知,class=box2的顶部、底部对齐都在其父元素div的基线上,因为父元素未设padding,所以它的高度取决于子元素的最大高度,它被子元素给“撑开”。
所以我们可以得出结论:对于行内元素vertical-align取值是以其父元素为参考。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,612评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,512评论 0 6
  • 参考文章:深入了解CSS的line-height属性Vertical-Align: 你需要知道的所有事【译】Ver...
    若邪Y阅读 3,487评论 1 6
  • 有些东西我们经常用,但是我们却并不了解它的原理,所以一旦换了场景,好多东西就不知道该怎么用了。最近一直很纠结ver...
    朱小维阅读 4,994评论 8 34
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92