CSS中vertical-align和text-align属性详解（使用场景、举例、注意点）、display：table-cell使用详解（基础介绍和使用例子）。
最新推荐文章于 2022-05-25 21:38:32 发布
YF-SOD
最新推荐文章于 2022-05-25 21:38:32 发布
阅读量1k
收藏
点赞数
1
最新推荐文章于 2022-05-25 21:38:32 发布
阅读量1k
收藏
点赞数
1
目录
注意点
text-align
display：table-cell使用详解
基础介绍
使用例子
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; ===》的应用 - 知乎
扫一扫
519
暂无认证
到【灌水乐园】发言
CSDN-Ada助手: ES6中引入了哪些新的数据类型和数据结构？
2301_79166408: 写的可以，记得我以前写的的是通过Java后台Ajax异步加载验证码方式加html，学习转发了
。
无味无为: 如果数组里面含有元素0，你的前面的条件判断不会使答案不对么
CSDN-Ada助手: 你阅读过某一个前端框架的源代码么？有没信心自己实现一个呢？
CSDN-Ada助手: 这些前端编译工具使用不同的语言开发: esbuild(Go), SWC(Rust), Bun(Zig), Parcel 2(JS/Rust), Vite(JS/Go), napi-rs(Rust)，这说明了什么问题？