1. 程式人生 > >Bootstrap 表格內容水平、垂直居中

Bootstrap 表格內容水平、垂直居中

水平居中

td th 設定text-align: center即可

這裡寫圖片描述

需要注意的是:th 預設的樣式為內容居左,td 則沒有,所以直接在 th 的父標籤 tr上新增 class="text-center"是無效的

這是無效的

<tr class="text-center">
            <th >#</th>
            <th>商品資訊</th>
            <th>金額</th>
            <th>訂單狀態</th>
<th>操作</th> </tr>

td 則可以

<tr class="text-center">
            <td>1</td>
               ...
            <td>
</tr>

垂直居中

這裡寫圖片描述

訂單時間、金額等 內容都是靠上方的,原因就是 Bootstrap 預設的設定就是vertical-align: top

這裡寫圖片描述

所以覆蓋這個樣式就可以了

.table tbody tr td{
            vertical-align
: middle
; }

注意樣式的選擇,下面的樣式就不能覆蓋,這裡涉及優先順序的問題,.table tbody tr td 的權值更大

 tbody tr td{
            vertical-align: middle;
        }

這裡寫圖片描述