我对line-height及vertical-align的一点理解

Eidesen 发布于2019-08-30 13:53 / 1400人阅读

摘要：张鑫旭老师在文章我对的一些理解与认识一中提到属性的表现与否，仅仅与其父标签有关，至于我们通常看到的与后面的文字垂直居中显示那都是假象经过摸索测试，才对这句话有种豁然开朗的感觉。匿名元素我是一段卡哇伊的文字。

张鑫旭老师在文章《我对CSS vertical-align的一些理解与认识（一）》中提到：

vertical-align:middle属性的表现与否，仅仅与其父标签有关，至于我们通常看到的与后面的文字垂直居中显示那都是假象！

经过摸索测试，才对这句话有种豁然开朗的感觉。

html：

        
            
            匿名元素
             我是一段卡哇伊的文字。

css：

    .box {
        margin: 36px 0;
        border: 1px dashed blue;
        font-size: 12px;
        color: white;
        background: red;
        /*height: 50px;*/  
    }

    .box .dot {
        display: inline-block;
        width: 16px;
        height: 16px;
        /*line-height:50px;*/
        background: white;
        vertical-align: baseline; // 这个baseline到底在哪里
    }

    .box .text {
        vertical-align: middle;
        /*line-height:50px; */
        font-size: 16px;
    }

首先要明白的是，一个行内元素有四条看不见的线（直接复制了张老师文章里的图片）：

这四条线的位置由谁决定呢，我认为是字体的大小，当字体的font-size:0时，则四线重合。
所以实际上子元素的vertical-align对齐是父元素的这几条线，看下图，我直接在父元素span里放乐“匿名元素”几个字，你能直观的发现，子元素对齐的就是“匿名元素”的baseline

另外：
1.vertical-align: baseline/middle...是指此元素的baseline/middle line 和父元素的对齐
2.对于空的元素，其baseline就是底边缘，比如.dot元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115605.html

我对line-height及vertical-align的一点理解

摘要：张鑫旭老师在文章我对的一些理解与认识一中提到属性的表现与否，仅仅与其父标签有关，至于我们通常看到的与后面的文字垂直居中显示那都是假象经过摸索测试，才对这句话有种豁然开朗的感觉。匿名元素我是一段卡哇伊的文字。张鑫旭老师在文章《我对CSS vertical-align的一些理解与认识（一）》中提到： vertical-align:middle属性的表现与否，仅仅与其父标签有关，至于我们通...

Harriet666 2019-08-01 18:27 评论0 收藏0
技本功丨呀~我不会写CSS之vertical-align（上集）

摘要：某日阅读世界，笔者的一段话鞭挞了我的灵魂。原文是这样的说到这里，我就忍不住多说两句。很多其实工作很多年的前端开发人员，也可能不知道的属性值支持数值，更不知道支持负值，这着实让我很意外。只显示文本的时候行高是。上集完敬请期待中下集 showImg(https://segmentfault.com/img/bVbmTbb?w=277&h=336); 某日阅读《CSS世界》，笔者的一段话鞭挞...

tianlai 2019-08-30 15:55 评论0 收藏0
CSS魔法堂：深入理解line-height和vertical-align

摘要：下的属性值详解以下内容均在中测试默认对齐方式这里作为参考系，而它的就是所要对齐的了。没有任何变化。那改变又如何呢为了让的清晰可见，特意添加一个的包裹着。前言一直听说line-height是指两行文本的基线间的距离，然后又说行高等于行距，最近还听说有个叫行间距的家伙，@张鑫旭还说line-height和vertical-align基情四射，贵圈真乱啊。。。。。。于是通过本篇来一探究竟...

avwu 2019-08-30 12:52 评论0 收藏0
关于css 的垂直居中

摘要：之前看了张大大的博客总结一下我对和的一些认知。站在巨人的肩膀上学习，再次谢谢张大大阮大大的各种分享。对于元素的水平居中，我根据我自己之前的一些学习来进行一些总结，如果有不对的地方，欢迎指正~ 一、让大小不固定的元素垂直居中因为：表格的单元格的特别属性：垂直居中等； `div.parent { display: table-cell; vertical-align...

caspar 2019-08-02 15:58 评论0 收藏0
关于css 的垂直居中

摘要：之前看了张大大的博客总结一下我对和的一些认知。站在巨人的肩膀上学习，再次谢谢张大大阮大大的各种分享。对于元素的水平居中，我根据我自己之前的一些学习来进行一些总结，如果有不对的地方，欢迎指正~ 一、让大小不固定的元素垂直居中因为：表格的单元格的特别属性：垂直居中等； `div.parent { display: table-cell; vertical-align...

icattlecoder 2019-08-29 13:56 评论0 收藏0