行内元素垂直布局：vertical-align

最新推荐文章于 2024-07-09 15:09:19 发布

听波の上

最新推荐文章于 2024-07-09 15:09:19 发布

阅读量914

点赞数

分类专栏： JS 文章标签： css

本文链接：https://blog.csdn.net/u012678833/article/details/103712879

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

行内元素在父级行框(line box)内垂直方向上对齐方式，默认是以父级行框的 baseline（基线）为参考进行对齐布局的。行内元素的样式vertical-align会控制自身如何与父级行框的进行对齐。

所以，首先要确定父级行框的基线、行内元素的baseline和行内元素的vertical-align的取值。

经过调试，总结了以下内容：

确定父级行框的基线

父级行框中内容区高度最高且其vertical-align的值为baseline的行内元素的baseline,即为父级行框的基线。

确定行内元素的基线

1.inline-box内容区内为空时，内容区的底部边界为基线

2.inline-box内容区内有内容（不论一行或多行内容）时，最后一行的行框的基线将作为此行内元素的基线，而这最后一行的行框，这里先叫基准行框吧

vertical-align确定行内元素相对于行框的垂直布局方式

行内元素的verital-align的默认值为：baseline，
还有其它取值：top, middle, bottom, text-top, text-bottom, super, sub

baseline: 默认取值
行内元素的baseline与父级行框的baseline对齐

middle
行内元素的baseline与基准行框的baseline - (x-height)/2 对齐

top
行内元素的顶部边界与父级行框的内容区顶部边界对齐（注意：不是padding,border的边界）

bottom
行内元素的底部边界与父级行框的内容区底部边界对齐

text-top
行内元素的内容区的顶部边界与基准行框的内容区顶部边界对齐

text-bottom
行内元素的内容区的底部边界与基准行框的内容区底部边界对齐

sub
行内元素的baseline下移到基准行框的下标位置

super
行内元素的baseline上移到基准行框的上标位置

Demo:
在这里插入图片描述

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
</head>
<body style="margin: 20px">

<div style="background: aquamarine;font-size: 20px;position: absolute">
    <label style="vertical-align: top;background: #ff41d8;">top</label>
    <label style="vertical-align: bottom !important;background: #ff981e;">bottom</label>
    <label style="vertical-align: baseline;background: darkgoldenrod;width: 50px;display: inline-block;overflow-wrap: break-word;">baseline</label>
    <label style="background: bisque;width: 40px; display: inline-block;overflow-wrap: break-word">xxxxxxxxxxxx<span style="background: red">xxxx</span></label>
    <label style="vertical-align: middle;background: rgba(136,125,255,0.71);color: white">middle</label>
    <label style="font-size: 10px;vertical-align: text-top;background: #37ff42;">text-top</label>
    <label style="font-size: 10px;vertical-align: text-bottom;background: #5796ff;">text-bottom</label>
    <label style="font-size: 10px;vertical-align: sub;background: #dfff58;">sub</label>
    <label style="font-size: 10px;vertical-align: super;background: rgba(249,255,246,0.88);">super</label>
    <span style="background: #9e9e9e87; display: inline-block; position: relative;top:-1px;height: 1px; width: 100%; vertical-align: baseline; margin-left: -100%;"></span>
</div>
</body>
</html>

听波の上

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
行内元素垂直布局：vertical-align

行内元素在line box(行框)内垂直方向上对齐是以行框的 baseline（基线）为参考进行对齐布局的。行内元素的样式vertical-align会控制自身如何与行框内的进行对齐。所以，首先要确定行框的基线、行内元素的baseline和行内元素的vertical-align的取值。经过调试，总结了以下内容：确定行框的基线行框中内容区高度最高且其vertical-align的值为bas...
复制链接

扫一扫

专栏目录