Bootstrap 表格圖片居中對齊：CSS 樣式與類名的正確用法

問題現象

在 Bootstrap 表格 `` 中插入 ``，圖片靠左顯示，無法水平居中。常見嘗試如 `` 對行內塊級元素 `` 不一定生效，或被其他樣式覆蓋。

核心原因

• `` 默認 `display: inline-block`，受父級 `text-align: center` 影響可居中，但若圖片被設置 `float`、`display: block` 或 Bootstrap 某些類名（如 `.img-fluid` 配合 `margin: auto` 需顯式 `display: block`）則失效。
• Bootstrap 4/5 表格單元格默認 `vertical-align: middle`，垂直居中通常無問題，水平需顯式處理。

解決方案（按推薦順序）

方案一：利用 Bootstrap 間距工具類（最簡潔，推薦）

給 `` 添加 d-block mx-auto：

<td>
    <img src="pic.png" class="d-block mx-auto" alt="居中圖片" />
</td>

• d-block：設置 `display: block`，使圖片成為塊級元素。
• mx-auto：設置 `margin-left: auto; margin-right: auto;`，實現水平居中。
• 此組合不依賴父級 `text-align`，穩健性最強。

方案二：父級 `` 設置 `text-align: center`（經典，適用於行內元素）

<td class="text-center">
    <img src="pic.png" alt="居中圖片" />
</td>

• Bootstrap 提供 `.text-center` 類，等同於 `text-align: center;`。
• 前提：`` 保持默認 `inline-block`，**未**被設置 `float`、`display: block` 或 `d-block`。

方案三：自定義 CSS 類（完全控制）

<style>
    .td-img-center > img {
        display: block;
        margin: 0 auto;
    }
</style>

<td class="td-img-center">
    <img src="pic.png" alt="居中圖片" />
</td>

優點：語義清晰，不污染圖片本身類名，方便批量維護。

方案四：Flexbox 佈局（現代，適用於複雜對齊）

<td class="d-flex justify-content-center align-items-center" style="height: 80px;">
    <img src="pic.png" alt="居中圖片" />
</td>

• 需指定 `` 高度或由內容撐開。
• 同時實現水平垂直居中，適合圖文混排單元格。

常見陷阱對照表

嘗試代碼	結果	原因
`		不居中	`.img-fluid` 含 `display: block; max-width: 100%; height: auto;`，脫離行內流
`		不居中	`d-block` 使圖片變塊級，`text-align` 不再生效
`		✅ 居中	塊級 + margin auto 標準居中法
`		✅ 居中	圖片保持 inline-block，受 text-align 控制

完整示例：Bootstrap 5 表格圖片居中

<table class="table table-bordered table-hover">
  <thead>
    <tr><th>編號</th><th>縮略圖</th><th>名稱</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td class="text-center"><img src="thumb1.jpg" class="img-thumbnail" style="max-width: 80px;" alt="產品1" /></td>
      <td>產品一</td>
    </tr>
    <tr>
      <td>2</td>
      <td><img src="thumb2.jpg" class="d-block mx-auto img-thumbnail" style="max-width: 80px;" alt="產品2" /></td>
      <td>產品二</td>
    </tr>
  </tbody>
</table>

總結

最推薦：給 `` 加 `class="d-block mx-auto"`（Bootstrap 4/5）。此法不依賴父級樣式，語義明確，兼容性最好。若圖片必須保持行內特性（如同行顯示多圖），則在父級 `` 加 `class="text-center"`。避免同時使用 `d-block` 和 `text-center` 組合，二者互斥。