温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vertical-align和line-height怎么在css中使用

发布时间:2021-04-02 15:37:40 来源:亿速云 阅读:131 作者:Leah 栏目:web开发

这期内容当中小编将会给大家带来有关vertical-align和line-height怎么在css中使用,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

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

实例:
  vertical-align和line-height怎么在css中使用

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

      vertical-align和line-height怎么在css中使用

代码如下:

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);

效果如下:

  vertical-align和line-height怎么在css中使用

完整代码如下:

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>  

 vertical-align和line-height怎么在css中使用

代码如下:

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>  

上述就是小编为大家分享的vertical-align和line-height怎么在css中使用了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI