vertical-align

元素之间垂直方向对齐属性。下面以inline-block元素和inline元素为例：

当文字与带有inline-block属性的元素连接时，会以底对齐的形式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{height: 100px;width: 100px;background-color: red;display: inline-block;}</style>
</head>
<body>    <div></div>abc
</body>
</html>

显示结果：

当div中添加文字时它会以，div中的文字底对齐，如图显示结果

vertical-align属性则是基于当前对齐的底，可以设置为像素值，为正则后面的abc往下跑，为负则往上跑。还可以设置为关键字top、middle、bottom、text-bottom、text-top。

注意点

1.top、bottom都是基于前面一个元素的整体（红色方块）顶部或底部对齐，而middle、text-bottom、text-top是后面abc的中线、底部、顶部与前面abc文字底部对齐。

2.inline-block元素之间的对齐也是同样，但要注意元素里有文字时采取文字和元素的对齐方式即上面例子。

3.该属性还可以作用于table-cell元素，见下面链接第7点。display: table-cell知识点总结 - 简书

text-align

文字左右方向的对齐属性。只能取关键字：left、right、center，分别表示文字在元素中左对齐，右对齐和居中（补充垂直方向居中用line-height等于height）。

display：table-cell使用详解

基础介绍

display: table-cell知识点总结 - 简书

使用例子

display——table-cell属性 - 给时光以生命 - 博客园

display:table-cell; ===》的应用 - 知乎

CSS中vertical-align和text-align属性详解（使用场景、举例、注意点）、display：table-cell使用详解（基础介绍和使用例子）。相关推荐

html设置单词间隔,css中设置英文单词之间间距的属性是什么
css中设置英文单词之间间距的属性是word-spacing.word-spacing属性可以增加或减少字与字之间的空白,如[p{word-spacing:30px;}]. 本文操作环境:window ...
如何使用 CSS 中的重置（reset）属性来重置元素在网页中的默认样式
嗨,大家好!今天,我要和你们聊聊CSS中的"重置"属性,也就是让我们一起来重置一下网页中元素的默认样式吧! 首先,让我们来看看一些常见的元素有什么特点,也就是需要"重置& ...
浅谈CSS中/deep/ ＞＞＞ ::v-deep属性进行样式穿透
背景在开发vue项目中,引入第三方ui组件库,只需要在当前页面修改第三方组件库的样式以做到不污染全局样式.通过在样式标签上使用`scoped`达到样式只制作用到本页面,但是此时再修改组件样式不起作用 ...
css中分区显示php,CSS中7个你必须知道属性
学习CSS是构建好看网页的一种方式. 但是,在学习过程中,我们倾向于(大部分时间)限制自己,一遍又一遍地使用相同的属性. 毕竟,我们是一种习惯性的动物,我们会使用自己习惯且熟悉的东西. 因此,在这篇文 ...
CSS中flex弹性盒子——弹性容器属性，弹性元素属性（附图）
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,2009 ...
css样式向下补白,div+css[3]：css中边框border与补白padding属性设置
1.边框属性 border □ 边框样式 border-style:none|dotted|dashed|solid|...... none:没有边框. dotted点线 dashed虚线 solid ...
CSS中content属性的妙用
前言本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属 ...
css亮黄色_写给前端工程师的色彩常识：色彩三属性及其在CSS中的应用
关注前端达人,与你共同进步大家好,本篇文章,笔者将给大家聊聊关于设计方面的一些常识,你也许会很奇怪的问,前端工程师有必要了解设计相关的常识吗?那我的答案就是十分有必要.因为我们这个工作岗位做的产品直 ...
写给前端工程师的色彩常识：色彩三属性及其在CSS中的应用
关注前端达人,与你共同进步大家好,本篇文章,笔者将给大家聊聊关于设计方面的一些常识,你也许会很奇怪的问,前端工程师有必要了解设计相关的常识吗?那我的答案就是十分有必要.因为我们这个工作岗位做的产品直 ...
HTML5中margin属性应用,CSS中margin属性及其使用探究
本文向大家描述一下CSS中margin属性的用法,主要包括其属性,使用过程中会遇到的问题,以及一些高级应用等内容,相信本文介绍一定会让你有所收获. CSS中margin问题及使用 margin属性为C ...

CSS中vertical-align和text-align属性详解（使用场景、举例、注意点）、display：table-cell使用详解（基础介绍和使用例子）。