表格文字不居中需同时设置text-align: center和vertical-align: middle；推荐用css类统一控制，避免内联样式或全局污染，并检查padding、box-sizing及direction等干扰因素。

table单元格文字不居中？先检查text-align和vertical-align

表格里文字默认既不水平居中也不垂直居中，常见表现是文字贴左上角。这不是浏览器bug，而是<td>和<code><th>的默认样式就是<code>text-align: left、vertical-align: middle——注意：垂直方向默认其实是middle，但常被父级line-height或内容高度干扰，导致看起来没居中。

实操建议：

• 水平居中必须显式写text-align: center，不能依赖“默认”
• 垂直居中优先用vertical-align: middle，但只对inline、table-cell等元素生效；<td>天然是<code>table-cell，所以直接设有效
• 避免给<td>设<code>height后又不配line-height，否则文字会偏上

  用CSS类统一控制比内联style更可靠

  在index.html里给每个<td>加<code>style="text-align:center;vertical-align:middle"能临时见效，但难维护、易遗漏。推荐在里加一段<style></style>：

  <style>
    table.centered td,
    table.centered th {
      text-align: center;
      vertical-align: middle;
    }
  </style>

  然后给<table>加<code>class="centered"。这样后续增删行/列都不用重复写样式。

  注意点：

  • 别写成table td { ... }全局影响——页面可能有其他不需要居中的表格
  • 如果用了Bootstrap等框架，它的table类可能已覆盖部分样式，需用!important或提高选择器权重（比如加table.centered tbody td）

  遇到文字被截断或撑高单元格？检查padding和box-sizing

  即使text-align和vertical-align都设对了，文字仍可能“看起来没居中”，典型原因是：padding不对称，或box-sizing为content-box导致尺寸计算混乱。

  排查步骤：

  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载
  • 用浏览器开发者工具选中<td>，看Computed面板里<code>padding是否上下左右一致（比如都是8px）
  • 确认没有意外设置padding-top: 0之类破坏对称性的规则
  • 若表格有固定高度且内容多行，vertical-align: middle对多行文本效果有限，此时考虑用display: flex替代（但需改DOM结构，兼容性要求IE10+）

  移动端适配时，text-align可能被direction或rtl影响

  如果表格在手机上文字突然右对齐，检查是否父容器或有dir="rtl"，或CSS里写了direction: rtl。这时text-align: center依然有效，但text-align: left会变成“视觉上的右对齐”。

  稳妥做法：

  • 明确重置方向：table.centered { direction: ltr; }
  • 避免在或全局* {}里设direction，除非真做双语站
  • 不要依赖text-align: start/end——它们受direction影响，在简单居中场景反而增加不确定性

  真正麻烦的不是写两行CSS，而是居中效果被其他层叠样式悄悄覆盖。每次调不好，先禁用所有外部CSS，再一行行开回来定位冲突源。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！