vertical-align 与 line-height 傻傻分不清??

  要说吧,咱家是个菜鸟,以前遇见垂直居中的东东,也是现查现用,其中最长遇到的东西就是 vertical-align 和 line-height,似乎这俩个兄弟都可以实现居中对齐,不过窃以为二者还是有区别的,所有 本着成为大牛的精神,不停的百度、百度,遇见的文章都像是老太太的裹脚布一样,又臭又长!实在让人难以理解,今天我在这里要说的简单一点,既然简化了,可能就不全,不过对于应付常用的开发,足矣!!

先看代码:

vertical-align 与 line-height 傻傻分不清??_第1张图片

这是使用line-height的例子,大家猜猜,结果会是怎样??

——不就是垂直居中嘛!

我:呵呵。。

看结果:

vertical-align 与 line-height 傻傻分不清??_第2张图片

咦?咋跟想象中的不一样呢?

嘿,这就说明line-height人家一直以来都是负责一行内的居中,现在是两行,它不变才怪呢!

再看一段代码:

vertical-align 与 line-height 傻傻分不清??_第3张图片

跟刚刚的几乎一模一样,只是将line-height换成了vertical-align,在看一下结果:

vertical-align 与 line-height 傻傻分不清??_第4张图片

哈,老老实实垂直居中了!

这就是俩货最直接的区别:

line-height一行垂直居中,而vertical-align不管有多少行,都能垂直居中!

当然了,这其中还有的细分点,比如:vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式........

有兴趣的可以去百度,我就不写了,嘎嘎。。嘎!

 

 



操作


添加随笔
   
       
            标题                       
                   
               
常用选项
           
               
个人分类
                   
                
               
发布选项
                                      
                    发布至首页候选区                                            
                    
                               发布至博客园首页(原创、精品、知识分享)                   
                    【发文说明】
                         博客园是面向开发者的知识分享社区,不允许发布任何推广、广告、政治方面的内容。
                                       博客园首页(即网站首页)只能发布原创的、高质量的、能让读者从中学到东西的内容。
                        如果博文质量不符合首页要求,会被工作人员移出首页,望理解。如有疑问,请联系[email protected]。                   
                                 
                               
网站分类
                           
        
       
高级选项
           
                              
                       
  •                                            
  •                    
  •                                        
  •                    
  •                                            
  •                    
  •                                            
  •                    
  •                                            
  •                    
  •                                            
  •                    
  •                                            
  •                    
  •                                            
  •                    
  •                                            
  •                
               
                                                        
                                 
                    EntryName(友好地址名,只能使用字母、数字、-连字符、_下划线,不超过150个字符)
                   
                                   
               
                    摘要:  插入摘要右侧图片
                   

               
               
                   
                        Tag标签:                         插入已有标签 (多个关键字之间用“,”分隔,最多不超过10个)
                                   

               
                    密码保护:                
           
        

       
                                                                  
               
                     
                
    










           
                                
                         lifusheng · 短消息(2) · 退出               
               
            
               

转载于:https://www.cnblogs.com/web-fusheng/p/6601614.html

你可能感兴趣的:(javascript,人工智能,嵌入式)