text-align 控制块级元素内文本或内联元素的水平对齐，常用值有 left、right、center、justify；vertical-align 控制行内元素或表格单元格内容的垂直对齐，常用值包括 top、middle、bottom、baseline；两者不互替且适用范围不同，复杂对齐应结合 flex 或 grid 布局。
text-align 和 vertical-align 是 CSS 中常用来控制对齐方式的两个属性，但它们的作用对象和使用场景完全不同。简单来说，text-align 控制的是文本或内联元素的水平对齐方式，而 vertical-align 则用于控制行内元素或表格单元格内容的垂直对齐。
下面我们就从几个常见用途出发，看看它们到底有什么区别、什么时候该用哪个。
text-align：控制水平对齐
text-align 主要用于设置块级元素内部文本或内联元素的水平对齐方式。它通常作用在父容器上，影响其所有子元素（特别是文本内容）的对齐。
立即学习“前端免费学习笔记（深入）”；
常用值包括：
left：左对齐（默认）right：右对齐center：居中对齐justify：两端对齐
比如你写一个 div 包含几段文字，默认是靠左对齐的。如果你希望这些文字都居中显示，就可以这样设置：
.container { text-align: center;}
需要注意的是，text-align 并不会影响块级子元素本身的对齐，除非它们是内联上下文的一部分，例如 或者设置了 display: inline-block 的元素。
vertical-align：控制垂直对齐
vertical-align 看起来像是用来做垂直居中的，但它其实只能作用于行内元素或表格单元格的内容。常见的使用场景包括图片和文本对齐、多个 inline-block 元素之间的对齐等。
LibLibAI
国内领先的AI创意平台，以海量模型、低门槛操作与“创作-分享-商业化”生态，让小白与专业创作者都能高效实现图文乃至视频创意表达。
159 查看详情
常用值有：
topmiddlebottombaseline（默认）
比如你想让一张图片和旁边的文本垂直居中对齐，可以这样写：
img { vertical-align: middle;}
但如果你想用它来实现一个 div 内容整体垂直居中，那就不合适了。这时候应该考虑 flex 或 grid 布局。
使用时容易混淆的点
很多人会误以为这两个属性能互相替代，或者能在任何布局中使用。实际上要注意几点：
text-align 是针对水平方向的，vertical-align 是针对垂直方向的它们都不是万能对齐工具，各自有适用范围vertical-align 只对 inline、inline-block、table-cell 类型的元素有效要实现复杂的对齐效果，建议结合 flex 或 grid 布局
举个例子：
如果你有一个 div 容器，想让里面的文字既水平又垂直居中，光靠 text-align 和 vertical-align 是不够的。这时候可以这样处理：
.container { display: flex; justify-content: center; align-items: center; height: 100px;}
基本上就这些。text-align 和 vertical-align 各司其职，理解它们的适用范围，才能在不同布局需求下正确选择。
以上就是CSS中text-align和vertical-align的对齐方式区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1109663.html
微信扫一扫 
支付宝扫一扫 
