TablePress 圖示沒有置中

整理日期：2026-04-27

狀況

TablePress 表格裡的打勾、打叉圖示沒有置中。

表格是版本比較型內容，左邊是功能名稱，右邊幾欄是不同版本是否支援。圖示如果偏左，整個表格看起來就很不整齊。

這種問題看起來很小，但對比較表很傷閱讀。

先拆成幾層看

我會先拆成幾層：

是整個 cell 沒置中，還是圖片本身沒置中。
圖片是 inline、inline-block，還是 block。
圖片有沒有 WordPress 自動加的 aligncenter。
TablePress 有沒有表格專屬 class 可以限定範圍。
第一欄長文字是否應該維持靠左。

不能只想著「全部 text-align: center 就好」。比較表第一欄如果也置中，長文字會很難讀。

最後發現

TablePress 的 td 預設是靠左。

一開始對 td 加 text-align: center，可以處理文字，但圖片仍然沒有穩定置中。

原因是圖示圖片帶有 WordPress 的置中 class，實際上常會是 display: block。text-align 對 block 元素不生效。

所以關鍵不是只處理父層 cell，而是要直接處理圖片。

修正方式

在 TablePress 的自訂 CSS 裡，針對特定表格 ID 加 scoped CSS。

概念像這樣：

.tablepress-id-X td {
  text-align: center;
  vertical-align: middle;
}

.tablepress-id-X td:first-child {
  text-align: left;
}

.tablepress-id-X td img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

這樣做有幾個好處：

只影響指定表格。
第一欄功能文字保留靠左。
圖片不依賴 aligncenter。
就算佈景主題對圖片有其他設定，也比較不容易跑掉。

不建議先做的事

不要把全站所有 TablePress 表格都一起改。

也不要只用 td:has(img) 就以為解決了。has() 可以讓選擇器更精準，但如果根本問題是圖片是 block 元素，還是要對圖片本身處理。

下次遇到可以先整理什麼

TablePress 表格 ID。
哪些欄位要置中，哪些欄位要靠左。
圖片目前的 display 和 float。
圖片是否有 aligncenter。
CSS 應該放在 TablePress 自訂 CSS，還是全站 CSS。
改完後是否需要清快取。

小表格問題也要 scope。表格越多，越不能用全站選擇器硬改。