行内元素对齐，vertical-align属性深入讨论

最新推荐文章于 2024-06-28 23:37:34 发布

疯狂踩坑人

最新推荐文章于 2024-06-28 23:37:34 发布

阅读量443

点赞数 1

分类专栏： css+html 文章标签： html html5 css css3

本文链接：https://blog.csdn.net/java_tang_shi_wen/article/details/112855322

版权

css+html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.行内元素对齐（vertical-align属性）

最终效果图：

在这里插入图片描述

代码：

<div class="box">
    <img class="avatar" src="../static/images/avatar.jpg" alt="">
    <span class="username">疯狂踩坑人</span>
    <span class="level_num">LV6</span>
    <span class="vip_type">大会员</span>
</div>

* {
    padding: 0px;
    margin: 0px;
}
.box {
    width: 100%;
    height: 120px;
    margin: 10px 50px;
}
.avatar {
    width: 60px;
    height: 60px;
    border-radius: 100px;
    border: solid 1px #ccc;
    vertical-align: middle; /*实现行内元素垂直居中*/
}
.username {
    font-size: 26px;
    font-weight: 500;
    vertical-align: middle; /*实现行内元素垂直居中*/
}
.level_num {
    font-size: 10px;
    color: white;
    display: inline-block;
    height: 26px;
    line-height: 26px; /*line-height和height保持一致实现一行文字居中*/
    background-color: orange;
    vertical-align: middle; /*实现行内元素垂直居中*/
}
.vip_type {
    font-size: 10px;
    color: white;
    display: inline-block;
    height: 26px;
    line-height: 26px; /*line-height和height保持一致实现一行文字居中*/
    background-color: purple;
    vertical-align: middle; /*实现行内元素垂直居中*/
}

2.关于vertical-align的深入讨论

vertical-align是用来指定一行的元素是如何垂直对齐的，那么其取值就是指取不同的对齐线，包括基线(baseline)，中线(middle)，顶线(top)，底线(bottom) 等。

看一下w3c对vertical-align的值的解释：

在这里插入图片描述

（注：以下提到的内联元素指 inline或inline-block)

1）带文字的内联元素基线

如果内联元素带有文字，那么父元素的基线就是文字的基线。

首先，需要了解带有文字的基线是指什么？可以参考维基百科的一张图：

在这里插入图片描述

<style>
    * {
        padding: 0px;
        margin: 0px;
    }
    .box {
        width: 900px;
        height: 300px;
        background-color: purple;
    }
    .inline_block {
        width: 30px;
        height: 30px;
        padding: 20px;
        background-color: orange;
        border: solid 20px blue;
        display: inline-block;
    }
    .inline_block .content {
        width: 100%;
        height: 100%;
        background-color: white;

    }
    .text {
        height: 60px;
        line-height: 60px;
        font-size: 26px;
        font-weight: 500;
        background-color: green;

        display: inline-block;
    }
    .block {
        width: 100%;
        background-color: yellow;
        height: 100px;
    }
 </style>

<body>
    <div class="box">
        <!-- 为了看到效果，这里使用div作为inline-block元素 -->
        <div class="inline_block">
            <div class="content">Hi</div>
        </div>
        <span class="text">caikeng</span>
        <div class="block"></div>
    </div>
</body>

在这里插入图片描述
如上图所示，两个内联元素.inline_block和.text都带有文字，此时父元素的baseline就是文字的baseline，则两个内联元素关于文字的baseline对齐。

2）不带文字的内联元素基线

如果内联元素不带文字，那么父元素的基线是父元素的底

在这里，我们需要对上图的“父元素”做一个理解，一行内联元素所占的一行空间，把这个空间叫做“父元素”，这里给它起一个名：linebox。

将上述代码中的html的Hi文字删除，使内联元素.inline_block不带文字，此时父元素（linebox）的baseline 就是linebox的底。效果见下图：

在这里插入图片描述

3）vertical-align取不同值的效果

.inline_block {
    ...;
    vertical-align: middle; /*新增*/
}

此时 .inline_block的对齐线是middle，.text的对齐线是baseline，效果如下图：

在这里插入图片描述

.inline_block {
    ...;
    vertical-align: middle; /*新增*/
}
.text {
   	...;
    vertical-align: middle; /*新增*/
}

此时 .inline_block的对齐线是middle，.text的对齐线是middle，效果如下图

在这里插入图片描述

疯狂踩坑人

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录