vertical-align之text-bottom与text-top解惑

迷南。 2021-07-05 00:47 343阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <style type="text/css"> body { margin: 0px; } #box { display: inline-block; line-height: 200px; } span { background-color: #0FF; } #box5 { vertical-align: text-top; } #box6 { vertical-align: text-bottom; } #box7 { vertical-align: top; } </style>
    </head>
    
    <body>
    
    <div id="box">
        X<span id="box5">text-top</span>
        <span id="box6">text-bottom</span>
        <span id="box7">top</span>
    </div>
    
    </body>
    </html>

`vertical-align` 属性设置一个元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。将`#box`中`X`的`行高`设置为`0`，就是这样的：  
![在这里插入图片描述][20191206161813102.png]  
将`#box`中`X`的行高设置为`200px`，文字`X`的基线下移，文字`text-top`也要下移才能与之对齐，于是就变成了图中那样。  
![在这里插入图片描述][20191206162005722.jpg]

[20191206161813102.png]: /images/20210704/d616de5802ed48e59816741eea38e4a8.png
[20191206162005722.jpg]: /images/20210704/07a11aea517645898ce5710b009c0324.png

发表评论取消回复

表情：

评论列表（有 0 条评论，343人围观）

还没有评论，来说两句吧...

相关阅读

相关长文解惑：区块链与比特币

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

拼搏现实的明天。/ 2023年06月11日 04:28/ 0 赞/ 111 阅读

相关解惑

1、[彻底解决Tomcat启动速度慢的问题][Tomcat] 2、[Comparison method violates its general contract!][Com

以你之姓@/ 2022年10月03日 00:55/ 0 赞/ 133 阅读

相关 Jenkins入门系列之——00答疑解惑

写在最前的总结：Jenkins其实就是一个工具，这个工具的作用就是调用各种其他的工具来达成你的目的。比如你要获取Subversion上最新的源代码，Jenkins会去调用SVN

怼烎@/ 2022年08月26日 11:23/ 0 赞/ 136 阅读

相关解惑rJava R与Java的高速通道

前言 Java语言在工业界长期处于霸主地位，Java语法、JVM、JDK、Java开源库，在近10年得到了爆发式的发展，几乎覆盖了应用开发的所有领域。伴随着Java的全领

妖狐艹你老母/ 2022年08月09日 03:25/ 0 赞/ 88 阅读

相关 iOS 证书与签名解惑详解

教程截图： [![Learn all about how Code Signing works!][Learn all about how Code Signing

墨蓝/ 2022年06月11日 04:37/ 0 赞/ 166 阅读

相关 ClassLoader解惑

ClassLoader解惑一、什么是Classloader 一个Java程序要想运行起来，首先需要经过编译生成 .class文件，然后创建一个运行环境（j

向右看齐/ 2022年06月11日 02:37/ 0 赞/ 146 阅读

相关 Redis学习之九 —— 阶段总结（解惑）

多种集群方案比较前面章节提到了哨兵（Sentinel）模式，搭载了一主多从的Redis模式，确保单实例的高可用。单实例哨兵模式：[https://blog.csd

忘是亡心i/ 2022年02月19日 15:43/ 0 赞/ 118 阅读

相关解惑

什么是document.body？返回html dom中的body节点即<body>复制代码什么是 document.documentElement？

Bertha 。/ 2022年01月20日 01:23/ 0 赞/ 194 阅读

相关 java 通配符解惑

Technorati 标记: [通配符][Link 1], [wildcard][], [java][] 本以为这会是一篇比较基础的博客，可一旦深究的时候，才发现很

梦里梦外;/ 2021年09月19日 07:14/ 0 赞/ 334 阅读

相关 vertical-align之text-bottom与text-top解惑

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title

迷南。/ 2021年07月05日 00:47/ 0 赞/ 344 阅读