南强小屋

浅谈css中vertical-align和line-height的用法
站长资源 2024/4/25 佚名
46 1538
南强小屋 Design By 杰米

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

实例：

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

代码如下：

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底部对齐的。

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

实例：放大之后可以很明显的看出来！

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

代码如下：

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,值为top/middle/bottom任意一个都可以（为了覆盖默认的值baseline）;

效果如下：

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

完整代码如下：

 

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>  

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

代码如下：

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的用法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

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

标签：
css,vertical-align,line-height
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米

评论“浅谈css中vertical-align和line-height的用法”

暂无浅谈css中vertical-align和line-height的用法的评论...
www.nqxw.com 南强小屋
8,675无损音乐
1,324高清电影
213破解软件
70,141收录教程

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接