• 技术文章 >web前端 >css教程

    vertical-align什么意思?怎么用 ?

    不言不言2019-04-12 14:29:51原创4941
    vertical-align是CSS中的一个属性,可以用于设置元素的垂直对齐方式,下面我们就来具体看一下vertical-align属性的用法。

    vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

    vertical-align属性的值比较多:

    baseline:默认。元素放置在父元素的基线上。

    sub:垂直对齐文本的下标。

    super:垂直对齐文本的上标

    top:把元素的顶端与行中最高元素的顶端对齐

    text-top:把元素的顶端与父元素字体的顶端对齐

    middle:把此元素放置在父元素的中部。

    bottom:把元素的顶端与行中最低的元素的顶端对齐。

    text-bottom:把元素的底端与父元素字体的底端对齐。

    length:

    %:使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

    inherit:规定应该从父元素继承 vertical-align 属性的值。

    比如:vertical-align top就是垂直对齐文本的顶部 。

    在表格中,这个属性设置单元格内容的对齐方式.vertical-align应用最多的应该是在td内,控制内部对象位置。

    下面我们来看一个具体的示例:

    <html>
    
    <head>
    <style type="text/css">
    img.top {vertical-align:text-top}
    img.bottom {vertical-align:text-bottom}
    </style>
    </head>
    
    <body>
    
    <p>
    这是一幅<img class="top" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
    </p> 
    
    <p>
    这是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
    </p>
    
    </body>
    
    </html>

    运行效果如下:

    微信截图_20190412142706.png

    本篇文章到这里就已经全部结束了,更多精彩内容大家可以关注PHP中文网的CSS视频教程栏目!!!

    以上就是vertical-align什么意思?怎么用 ?的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:vertical-align
    上一篇:css sprites如何使用? 下一篇:CSS按钮如何实现?CSS按钮实现的几种方法介绍
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• 解读css中的vertical-align属性• CSS中关于属性vertical-align的用法详解• 深入理解 CSS line-height 和 vertical-align的用法• 怎样使用vertical-align让input元素和img元素对齐
    1/1

    PHP中文网