Bootstrap 表格內容居中：讓數據更清晰

Bootstrap表格內容居中技巧：使用text-center類實現水平居中（table-centered類名應用於th和td元素）。使用d-flex和align-items-center類垂直對齊內容，並設置div高度匹配行高（適用於固定行高的表格）。

Bootstrap 表格內容居中：提升表格可讀性

在Bootstrap 表格中，內容居中是改善表格可讀性和美觀性的有效方法。通過CSS 樣式，可以輕鬆地將表格內容水平居中或垂直居中。

水平居中

要水平居中表格內容，請使用text-center類：

 <code class="css">.table-centered { text-align: center; }</code>

然後將其應用於<th>和<code><td>元素：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code class=&quot;html&quot;&gt;&lt;table class=&quot;table-centered&quot;&gt; &lt;tr&gt; &lt;th&gt;头1&lt;/th&gt; &lt;th&gt;头2&lt;/th&gt; ... &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;数据1&lt;/td&gt; &lt;td&gt;数据2&lt;/td&gt; ... &lt;/tr&gt; &lt;/table&gt;&lt;/code&gt;</pre><div class="contentsignin">登入後複製</div></div> <p><strong>垂直居中</strong></p> <p>垂直居中表格內容需要更多步驟：</p> <ul><li>創建一個額外的<code><div>元素並將其包裹在<code><th>或<code><td>中。<li>為這個<code><div>元素應用<code>d-flex和align-items-center類，以垂直對其內容。

設置<div>的高度以匹配行高。<p>例如：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code class=&quot;html&quot;&gt;&lt;table&gt; &lt;tr&gt; &lt;th&gt; &lt;div class=&quot;d-flex align-items-center&quot; style=&quot;height: 50px;&quot;&gt;头1 &lt;/div&gt; &lt;/th&gt; ... &lt;/tr&gt; ... &lt;/table&gt;&lt;/code&gt;</pre><div class="contentsignin">登入後複製</div></div> <p>要自定義高度，只需調整<code>style="height: 50px;"中的值即可。

注意：

• 垂直居中僅適用於固定行高的表格。
• 如果表格內容包含元素（例如按鈕或圖像），請使用適當的CSS 規則來使其水平或垂直居中。