对vertical-align的理解

vertical-align的理解：

设置元素的垂直对齐方式，是以父元素作为参照的。

多用于图片和文字的并排对齐。

适用于内联元素，内联块元素和表单元素。

display:inline;
display:inline-block;
display:table;
display:table-cell;

浏览器支持所有浏览器都支持 vertical-align 属性。

允许指定负长度值和百分比值。

在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

默认值：baseline

继承性：无

JS语法：

object.style.verticalAlign="bottom"

基线

下面红线就是基线。

取值

baseline

默认。元素基线与父元素的基线对齐。

一些可替换元素，比如 `` ， HTML标准没有说明它的基线，这意味着使用这个关键字，各浏览器表现可能不一样。

sub

元素基线与父元素字体的下标基线对齐。

super

元素基线与父元素字体的上标基线对齐。

text-top

元素顶端与父元素字体的顶端对齐。

text-bottom

元素底端与父元素字体的底端对齐。

middle

元素中线与父元素的小写x中线对齐。把此元素放置在父元素的中部。

元素基线超过父元素的基线指定高度。可以取负值。

同 <length> , 百分比相对于 line-height 。可以为负值。基线对于百分数来说就是0%。

用百分比指定由基线算起的偏移量。

下面两个属性不像上面的属性相对于父元素，而是相对于整行：

top

元素及其后代的顶端与整行的顶端对齐。

bottom

元素及其后代的底端与整行的底端对齐。

如果元素没有基线baseline，则以它的外边距的下边缘为基线。

取值 (table-cell元素)

baseline (and sub, super, text-top, text-bottom, <length>, and <percentage>)

与同行单元格的基线对齐。

top

单元格的内边距的上边缘与行的顶端对齐。

middle

单元格垂直居中。

bottom

单元格的内边距的下边缘与行的底端对齐。

可以取负值。

例子

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <title>vertical-align</title>
    <style>
        .test p {
            border: 1px solid red;
            font-size: 26px;
            line-height: 1;
        }
        

        .test a {
            margin-left: 5px;
            font-size: 18px;
            text-decoration:none;
        }

        .baseline a {
            vertical-align: baseline;
        }

        .sub a {
            vertical-align: sub;
        }

        .super a {
            vertical-align: super;
        }

        .top a {
            vertical-align: top;
        }

        .text-top a {
            vertical-align: text-top;
        }

        .middle a {
            vertical-align: middle;
        }

        .bottom a {
            vertical-align: bottom;
        }

        .text-bottom a {
            vertical-align: text-bottom;
        }

        .length a {
            vertical-align: 10px;
        }
    </style>
</head>
<body>
<ul class="test">
    <li class="baseline">
        <strong>与基线对齐</strong>
        <p>参考内容X<a href="?">baseline基线对齐</a></p>
    </li>
    <li class="sub">
        <strong>与参考内容X的下标对齐</strong>
        <p>参考内容X<a href="?">sub下标对齐</a></p>
    </li>
    <li class="super">
        <strong>与参考内容X的上标对齐</strong>
        <p>参考内容X<a href="?">super上标对齐</a></p>
    </li>
    <li class="top">
        <strong>对象的内容与对象顶端对齐</strong>
        <p>参考内容X<a href="?">top要对齐的内容</a></p>
    </li>
    <li class="middle">
        <strong>对象的内容与对象中部对齐</strong>
        <p>参考内容X<a href="?">middle要对齐的内容</a></p>
    </li>
    <li class="bottom">
        <strong>对象的内容与对象底端对齐</strong>
        <p>参考内容X<a href="?">bottom要对齐的内容</a></p>
    </li>
    
    <li class="text-top">
        <strong>对象的文本与对象顶端对齐</strong>
        <p>参考内容X<a href="?">text-top要对齐的内容</a></p>
    </li>
    <li class="text-bottom">
        <strong>对象的文本与对象底端对齐</strong>
        <p>参考内容X<a href="?">text-bottom要对齐的内容</a></p>
    </li>
    <li class="length">
        <strong>与基线算起的偏移量</strong>
        <p>参考内容X<a href="?">length偏移量对齐</a></p>
    </li>
</ul>
</body>
</html>

对vertical-align的理解

基线

取值

例子

吃码小妖

引用和评论

window 右键菜单中添加在vs code 打开

CSS团队协作规范

前端开发工具

CSS 如何模拟“真实的”进度条？

纯CSS实现有趣emoji切换开关

那些年我用过的SAP IDE

SAP UI5 初学者教程之十三 - 如何添加自定义 CSS 类试读版