网页制作

浅谈css中vertical-align和line-height的用法
网页制作 2025/4/13 佚名
3 2

（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
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com

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

暂无“浅谈css中vertical-align和line-height的用法”评论...
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

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