是否可以在 Ext.grid.column.Action 中垂直对齐

Question

http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.grid.column.Action

使用 extjs 操作列，我能够将操作列的图标水平居中，但是我无法垂直对齐图标，这导致布局看起来很奇怪。

{
    xtype: 'actioncolumn',
            tooltip: this.self.QUICKLOOK_TOOLTIP,
            tdCls: 'action-column',
            isDisabled: function(view, rowIndex, colIndex, item, record) {
                return !this.quicklookable(record);
            },
            getClass: function(value, metaData, record) {
                return this.quicklookable(record) ? 'bui-icon quicklook' : '';
            },
            itemId: 'activityListOpenQuicklook',
            width: 50,
            align: 'center',
            handler: function(grid, rowIndex, colIndex, item, evt, record, row) {
                this.fireEvent('openQuicklook', record);
            },
            scope: this
}

有没有人有关于如何使用操作列组件垂直对齐的解决方案？

Answer 1

最好的方法是将 vertical-align: middle; 添加到您的 CSS，如下所示：

.x-grid-cell.action-column {
    vertical-align: middle;
}

是否可以在 Ext.grid.column.Action 中垂直对齐

Is it possible to align vertically in Ext.grid.column.Action

javascript

css

extjs

extjs4