大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

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

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:申请域名雅安服务器托管、营销软件、网站建设、海林网站维护、网站推广。

  1.   

  2.   

  3.   

  4.       

  5.     css中vertical-align和line-height的用法  

  6.       

  7.   

  8.   

  9.     

      

  10.           

  11.     

  

  •   

  •   

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

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

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

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

    代码如下:

    XML/HTML Code复制内容到剪贴板

    1.   

    2.   

    3.   

    4.       

    5.     css中vertical-align和line-height的用法  

    6.       

    7.   

    8.   

    9.     

        

    10.           

    11.         xxxxx!  

    12.     

      

  •   

  •   

  • 为什么会出现这种现象呢?

    答:原因是行内元素默认都受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.   

    2.   

    3.   

    4.       

    5.     css中vertical-align和line-height的用法  

    6.       

    7.   

    8.   

    9.     

        

    10.           

    11.         xxxxx!  

    12.     

      

  •   

  •   

  • 2、图片垂直居中的问题

    在div和img中添加以下属性及属性值即可实现图片在div块中的垂直居中。

    XML/HTML Code复制内容到剪贴板

    1.   

    2. ...   

    3.   

    4. div{   

    5.     line-height: 500px;   

    6.     font-size: 0px;   

    7. }   

    8. img{   

    9.     vertical-align: middle;   

    10. }   

    11.   

    12. ...   

    13.   

    14.   

    15.   

    16.     

        

    17.           

    18.         xxxxx!  

    19.     

      

  •   

  •   

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


    当前题目:vertical-align和line-height怎么在css中使用
    URL地址:http://dzwzjz.com/article/gsjpsp.html

    其他资讯

    在线咨询
    服务热线
    服务热线:028-86922220
    TOP