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

迷南。 2021-07-05 00:47 404阅读 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 条评论，404人围观）

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

相关阅读

相关解惑

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

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

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

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

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

相关 Java 通配符解惑

转自：[http://www.linuxidc.com/Linux/2013-10/90928.htm][http_www.linuxidc.com_Linux_2013-1

ゝ一世哀愁。/ 2022年07月16日 01:40/ 0 赞/ 194 阅读

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

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

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

相关 ClassLoader解惑

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

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

相关解惑spring事务传播特性之嵌套事务

在所有使用 spring 的应用中, 声明式事务管理可能是使用率最高的功能了, 但是, 从我观察到的情况看, 绝大多数人并不能深刻理解事务声明中不同事务传播属性配

古城微笑少年丶/ 2022年06月08日 04:07/ 0 赞/ 399 阅读

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

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

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

相关解惑

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

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

相关 java 通配符解惑

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

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

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

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

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