text-align 用于块级元素内行内容的水平对齐，如文字居中；vertical-align 用于行内元素或表格单元格的垂直对齐，如图文对齐。两者作用对象不同，不可混淆。
text-align 和 vertical-align 是 CSS 中常被混淆的两个属性，它们都涉及“对齐”，但作用对象和使用场景完全不同。下面分别说明它们的用途、取值和常见用法。
text-align：控制文本的水平对齐方式
text-align 用于设置**块级元素内行内内容的水平对齐方式**，比如文字、图片等在容器中的左右或居中排列。
它适用于块级元素（如 div、p、h1~h6），不能用于控制单个行内元素自身的位置。
常用取值包括：
立即学习“前端免费学习笔记（深入）”；
left：左对齐（默认） center：居中对齐 right：右对齐 justify：两端对齐（使每行文字宽度一致，常用于段落排版）
示例：
div { text-align: center;}
这个设置会让 div 里的文字、图片等内容在 div 内部水平居中显示。
vertical-align：控制行内或表格单元格内容的垂直对齐
vertical-align 用于设置**行内元素或表格单元格内容在垂直方向上的对齐方式**。它最常用于：
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情 图片与文字的对齐（如 img 与 span 并排时） 表格单元格（td/th）中内容的上下对齐 使用 display: table-cell 的元素
注意：vertical-align 对块级元素无效，也不能用来垂直居中一个块级盒子本身（比如让一个 div 在页面中间竖直居中）。
常见取值有：
baseline：基线对齐（默认） top：顶部对齐 middle：居中对齐 bottom：底部对齐 text-top / text-bottom：相对于文字的顶部/底部 sub / super：下标/上标（类似 math 效果）
示例：
img { vertical-align: middle;}
这能让图片和旁边的文本在垂直方向上居中对齐，避免出现图文错位的情况。
常见误区与使用建议
很多人误以为 vertical-align 可以让一个 div 垂直居中于父容器，这是错误的理解。要实现块级元素的垂直居中，应使用 flexbox、grid 或 line-height（单行文本）等方法。
关键点总结：
text-align 控制**水平对齐**，作用于**块级容器内的行内容器** vertical-align 控制**垂直对齐**，只对**行内元素、表格单元格**有效 两者都不能直接“居中”一个块级盒子本身 图文混排时，vertical-align 很实用；排版段落时，text-align 更常用基本上就这些，理解清楚作用范围，就能避免大多数布局问题。
以上就是css文本对齐text-align与vertical-align使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/996068.html
微信扫一扫 
支付宝扫一扫 
