浅谈css中vertical

2021-01-20 05:42 jianzhan

(1)、将1个照片放入1个div块中,div块情况色调设定为aquamarine。可能发现照片与div块下边缘有1定空隙。

案例:

         

编码以下:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>css中vertical-align和line-height的用法</title>  
  6.     <style>  
  7.         *{   
  8.             margin: 0px;   
  9.             padding: 0px;   
  10.         }   
  11.         div{   
  12.             background-color: aquamarine;   
  13.         }   
  14.         img {   
  15.             width: 300px;   
  16.         }   
  17.     </style>  
  18. </head>  
  19. <body>  
  20.     <div>  
  21.         <img src="./9172.jpg" alt="picture">  
  22.     </div>  
  23. </body>  
  24. </html>  

(2)、在div块的照片后边放入1个span标识,內容为xxxx!,会发现span标识内的元素与照片是在底线对其的,当给span加1个情况时,能够看到照片底部是与字母x底部对齐的。

案例:
  

案例:变大以后能够很显著的看出来!

      

编码以下:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>css中vertical-align和line-height的用法</title>  
  6.     <style>  
  7.         *{   
  8.             margin: 0px;   
  9.             padding: 0px;   
  10.         }   
  11.         div{   
  12.             background-color: aquamarine;   
  13.         }   
  14.         img{   
  15.             width: 300px;   
  16.         }   
  17.         span{   
  18.             background-color: azure;   
  19.         }   
  20.     </style>  
  21. </head>  
  22. <body>  
  23.     <div>  
  24.         <img src="./9172.jpg" alt="picture">  
  25.         <span>xxxxx!</span>  
  26.     </div>  
  27. </body>  
  28. </html>  

为何会出現这类状况呢?

答:缘故是行内元素默认设置都受vertical-align(竖直对齐方法)和line-height(行高)的危害,而vertical-align默认设置的对齐方法是baseline,即基准线对齐。这个基准线便是span标识里的字母X的下边缘,故照片底部是与字母底部相对性齐的(并不是与span标识的情况对齐)。又由于字母自身有line-height(行高)值,因此span标识再加情况后比字母要高1些。

处理方式:(4种方式随意1种都可以处理该难题)

(1)、将全部div内的font-size设定为0;

(2)、将照片img变成块级元素,即设定其为display:block;

(3)、给div设定1个行高(值尽可能小些),设定为line-height:5px;

(4)、设定照片img竖直对齐方法vertical-align,值为top/middle/bottom随意1个都可以以(以便遮盖默认设置的值baseline);

实际效果以下:

  

详细编码以下:

 

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>css中vertical-align和line-height的用法</title>  
  6.     <style>  
  7.         *{   
  8.             margin: 0px;   
  9.             padding: 0px;   
  10.         }   
  11.         div{   
  12.             background-color: aquamarine;   
  13.             /*line-height: 5px;*/   
  14.             /*font-size: 0;*/   
  15.         }   
  16.         img{   
  17.             width: 300px;   
  18.             /*display: block;*/   
  19.             vertical-align: bottom;   
  20.         }   
  21.         span{   
  22.             background-color: azure;   
  23.         }   
  24.     </style>  
  25. </head>  
  26. <body>  
  27.     <div>  
  28.         <img src="./9172.jpg" alt="picture">  
  29.         <span>xxxxx!</span>  
  30.     </div>  
  31. </body>  
  32. </html>  

2、照片竖直垂直居中的难题

在div和img中加上下列特性及特性值便可完成照片在div块中的竖直垂直居中。

XML/HTML Code拷贝內容到剪贴板
  1. <style type="text/css">  
  2. ...   
  3.   
  4. div{   
  5.     line-height: 500px;   
  6.     font-size: 0px;   
  7. }   
  8. img{   
  9.     vertical-align: middle;   
  10. }   
  11.   
  12. ...   
  13. <style>  

 

编码以下:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>css中vertical-align和line-height的用法</title>  
  6.     <style>  
  7.         *{   
  8.             margin: 0px;   
  9.             padding: 0px;   
  10.         }   
  11.         div{   
  12.             background-color: aquamarine;   
  13.             line-height: 500px;   
  14.             font-size: 0px;   
  15.         }   
  16.         img{   
  17.             width: 300px;   
  18.             vertical-align: middle;   
  19.         }   
  20.         span{   
  21.             background-color: azure;   
  22.         }   
  23.     </style>  
  24. </head>  
  25. <body>  
  26.     <div>  
  27.         <img src="./9172.jpg" alt="picture">  
  28.         <span>xxxxx!</span>  
  29.     </div>  
  30. </body>  
  31. </html>  

以上这篇浅谈css中vertical-align和line-height的用法便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。

原文详细地址:http://www.cnblogs.com/gaotenglong/archive/2016/07/26/5708793.html