vertical-align属性和用法详解

前端这点事 185 0

Vertical-align属性

  • Vertical-align被用于垂直对齐inline元素,inline-block元素,以及inline-table的元素

  • inline元素基本上指的就是文本,inline-block元素基本上指图片,inline-table基本上指的表格

文字对齐

基本介绍

  • baseline:将元素x的基线与其父元素x的基线对齐

  • middle:将元素行高的中间与父对象x的基线对齐,再加上父对象的x高度的一半

  • top:将元素的顶部及其后代与整个行的顶部对齐

  • bottom:将元素的底部及其后代与整行的底部对齐

  • 允许指定长度值和百分比值,在与基线对齐的基础上正值向上,负值向下

<style type="text/css">
    div{
        font-size: 100px;
        border: 10px solid red;
    }
    span{
        font-size: 20px;
        border: black solid 5px;
        /*vertical-align: baseline;*/
        /*vertical-align: top;*/
        /*vertical-align: middle;*/
        /*vertical-align: bottom;*/
        vertical-align: -100px;
    }
</style>

<body>
<div>index
    <span>xxx</span>
</div>
</body>

baseline对齐
1.png

middle对齐
2.png

top对齐
3.png

图片对齐


块元素中的图片

  • 块元素中的图片默认与基线对齐,所以下面由空隙

  • 只需要将Vertical-align的值改为非baseline,就可解决

4.gif

图片与文字

6.png

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~