CSS之vertical-align之野史篇（超越官网的教程）

我相信大家一定都在Css的官网上看过这个属性，也看了官网上的一个例子。官网上展示的是一个兔子图片和一行文字对齐的故事。但是，我也相信很多人和我一样，看完官网的例子依然没有彻底弄清这个属性到底该怎么使用。
于是，我自己写了下面的几个小例子，我就彻底明白了这个属性的用法。
vertical属性有以下的值：top和text-top；其他的值雷同，就不一一列出。
在介绍这两个值的含义之前，我们要先明白vertical-align这个属性用在什么场合，也就是能用在什么元素上。对此，我总结如下：它只能用在行内块元素上。至于为什么是行内块元素呢？这里我就不揭示了，等你会用了，我想你就能明白是问什么了。
那下面来说明top和top-text的含义：
top是说，行内块元素的顶端和父元素最高的元素顶端对齐。
top-text是说，行内块的元素和父元素中文本的顶端对齐。

下面的代码，动手试试你就能明白：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vertical-align</title><style type="text/css">.div{width: 800px;height: 400px;margin: auto;border: solid 1px;}.div1{display: inline-block;width:40px;height: 200px;background-color: black;}.div2{display: inline-block;width: 20px;height:5px;background-color: blue;vertical-align: text-top;}.div3{display: inline-block;width: 20px;height:5px;background-color: green;vertical-align: top;}</style>
</head>
<body><div class="div"><div class="div1"></div><span>这是一段文字</span><div class="div2"></div><div class="div3"></div></div>
</body>
</html>

其效果如下所示：

其中，蓝色的小长块表示的是和文本的顶端对齐，绿色的小块表示的是和父元素中最高元素即黑色长方块元素的顶端对齐。

CSS之vertical-align之野史篇（超越官网的教程）相关推荐

html5 css js前端开发五子棋UI篇--基于慕课网五子棋视频教程的随笔
第一次写笔记,不知道带有别的网站是否违规,为了尊重别人果实,这次笔记就是基于慕课网五子棋教程,大家有兴趣可以去看一下.我自己增加了开始,暂停,继续,重新开始的按钮,由于是新手,最大目的在于实现功能,其 ...
div+css静态网页设计——防锤子手机商城官网 (1页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
HTML5期末大作业:防锤子手机商城网站设计--防锤子手机商城官网 (1页) HTML5网页设计成品文章目录 HTML5期末大作业:防锤子手机商城网站设计--防锤子手机商城官网 (1页) HTML5 ...
html，css响应式布局案例练习--星巴克官网demo
前言继续练习响应式布局,我这次选的是星巴克的官网,进行一个页面的还原,还原程度达不到100%,不过也是可以进行一个学习过程的一个练习,细节很多,本人由于初学阶段,用了一天的时间就写了一个官网首页,兼 ...
HTML网页期末作业：基于Html+Css+javascript的网页制作（化妆品企业官网设计20页）...
HTML网页期末作业：基于Html+Css+javascript的网页制作（化妆品企业官网设计20页）
web网页设计与制作-html+css+js实现企业官网展示
web网页设计与制作-html+css+js实现企业官网展示主要使用原生HTML.CSS.JavaScript编写的一个静态企业官网展示类型的网站. 文件目录 assets:静态资源目录: favi ...
30个HTML+CSS前端开发案例（完结篇）
30个HTML+CSS前端开发案例(完结篇) flex弹性布局-今日头条首页热门视频栏代码实现效果 flex弹性布局-微博热搜榜单代码实现效果 grid网格布局-360图片展示代码实现效果 ...
html中css如何引用自定义字体 - 案例篇
html中css引用自定义字体,实现自定义字体样式效果(含案例) 网页中不同的字体,代码是怎么定义的?怎么引用外来字体文件? html 案例 · 代码如下: <!DOCTYPE html> ...
#3使用html+css+js制作网页番外篇使用python flask 框架 (I)
#3使用html+css+js制作网页番外篇使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...

CSS之vertical-align之野史篇（超越官网的教程）

CSS之vertical-align之野史篇（超越官网的教程）相关推荐

最新文章

热门文章