bootstrapTable：如何垂直對齊細節圖標？

Question

我正在使用bootstrapTable並遇到以下問題：

在表格的每一行中，都顯示了預覽圖片，因此行高大於“正常”，其余列中的內容位於頂部。 我想垂直對齊這些列中的文本/按鈕/復選框。 通過對列使用align: 'center'和valign: 'middle' ，可以實現這一點-至少對於“ normal”列而言。 它對包含復選框和詳細信息圖標（“加號”圖標）的列沒有影響。

我加了

.bs-checkbox {
    text-align: center !important;
    vertical-align: middle !important;
}

到我的css文件，並收到所需的結果。 但是， detail-icon類的模擬方法出錯了。 我在Stackoverflow上發現了類似的問題-但是答案並沒有幫助我。

有誰能解決我的問題嗎？

這里是一個例子：

 var data = [ { "id": 0, "name": "Item 0", "price": "$0", "preview": '<img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" height="50">' }, { "id": 1, "name": "Item 1", "price": "$1", "preview": '<img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" height="50">' }, { "id": 2, "name": "Item 2", "price": "$2", "preview": '<img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" height="50">' } ]; $(function () { $('#table').bootstrapTable({ columns: [ { field: 'state', checkbox: true, align: 'center', valign: 'middle' }, { field: 'id', title: 'ID', align: 'center', valign: 'middle', sortable: true }, { field: 'name', title: 'Name', sortable: true, align: 'center', valign: 'middle', editable: { type: 'text', title: 'Name', validate: function (value) {return '';} } }, { field: 'price', title: 'Price', align: 'center', valign: 'middle', editable: { type: 'text', title: 'Price', validate: function (value) {return '';} } }, { field: 'preview', title: 'Preview', align: 'center', valign: 'middle' } ], data: data }); }); 

 .bs-checkbox { text-align: center !important; vertical-align: middle !important; } /* won't work:*/ .detail-icon { text-align: center !important; vertical-align: middle !important; } 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script> <script src="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script> <script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/extensions/editable/bootstrap-table-editable.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/> <link href="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/> <div class="container"> <div id="toolbar"> <button id="new_btn" class="btn btn-success"> <i class="glyphicon glyphicon-plus"></i> New </button> <button id="delete_btn" class="btn btn-danger" disabled> <i class="glyphicon glyphicon-trash"></i> Delete </button> </div> <table id="table" data-toolbar="#toolbar" data-search="true" data-show-pagination-switch="true" data-detail-view="true" data-detail-formatter="detail_formatter" data-minimum-count-columns="2" data-pagination="true"> </table> </div> 

Answer 1

實際上，您將要在表單元格本身而不是單元格中的元素上設置這些屬性。

#table td {
    vertical-align: middle;
    text-align: center;
}

這應該可以解決問題。