(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

广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!

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

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

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

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