浅谈css中vertical-align和line-height的用法

建站知识 2021-07-03 08:15www.168986.cn长沙网站建设

(1)、将一个图片放入一个div块中,div块背景颜色设置为aquamarine。将会发现图片与div块下边沿有一定间隙。

实例:

         

代码如下:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  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="./131796750659172.jpg" alt="picture">  
  22.     </div>  
  23. </body>  
  24. </html>  

(2)、在div块的图片后面放入一个span标签,内容为xxxx!,会发现span标签内的元素与图片是在底线对其的,当给span加一个背景时,可以看到图片底部是与字母x底部对齐的。

实例:
  

实例:放大之后可以很明显的看出来!

      

代码如下:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  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="./131796750659172.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)、将整个div内的font-size设置为0;

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

(3)、给div设置一个行高(值尽量小些),设置为line-height:5px;

(4)、设置图片img垂直对齐方式vertical-align,值为/middle/bottom任意一个都可以(为了覆盖默认的值baseline);

效果如下:

  

完整代码如下:

 

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  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="./131796750659172.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-8">  
  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="./131796750659172.jpg" alt="picture">  
  28.         <span>xxxxx!</span>  
  29.     </div>  
  30. </body>  
  31. </html>  

以上这篇浅谈css中vertical-align和line-height的用法就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。

原文地址:http://.blogs./gaotenglong/archive/2016/07/26/5708793.html

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by