Come si centra un pulsante in una cella angolare-griglia ui?

Question

definisco una colonna come segue:

{ 
    name: 'button', 
    displayName: '', 
    cellClass: 'ui-grid-vcenter', 
    enableColumnMenu: false, 
    enableFiltering: false, 
    enableSorting: false, 
    cellTemplate: '<div><button ng-click="grid.appScope.rowButtonHandler(row.entity.id)">clicky</button></div>' 
} 

conseguente:

<div class="ui-grid-cell ng-scope ui-grid-coluiGrid-010 ui-grid-vcenter" ui-grid-cell="" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name"> 
    <div class="ng-scope"> 
     <button ng-click="grid.appScope.rowButtonHandler(row.entity.id)"></button> 
    </div> 
</div> 

voglio centrare questo pulsante verticalmente e orizzontalmente. Orizzontalmente, funziona, ma in verticale, non riesco a ottenere il CSS giusto. Ecco il mio colpo generico a esso:

.ui-grid-vcenter div { 
    text-align: center; 
    vertical-align: middle !important; 
    background-color: yellow !important; 
} 

Come contenuto un centro in una cella in questo tipo di AngularJS griglia?

Answer 1

Uso posizione relativa:

.ui-grid-vcenter div { 
    background-color: yellow !important; 
    text-align:center; 
    position: relative; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

Answer 2

usando i CSS flex renderebbe molto più facile (https://css-tricks.com/snippets/css/a-guide-to-flexbox/):

suppone che è il tuo CellTemplate (myCellTemplateForEditAndDelBtns.html):

<div id="editBtns" class="flexParent"> 
<span class="flexChildren"> 
    <button><i class="fa fa-pencil-square-o "></i></button> 
    <button><i class="fa fa-times gridDelBtn"></i></button> 
</span> 
</div> 

È aggiungilo in columDefs al tuo computer ll:

$scope.myGrid.columnDefs = [ 
    ... 
    { name: 'edit', 
     enableCellEdit: false, 
     enableFiltering: false, 
     enableSorting: false, 
     cellTemplate: 'location-to/myCellTemplateForEditAndDelBtns.html', 
     width: '5%' 
    } 
]; 

E infine uso CSS Flex:

#editBtns { 
    height: 100%; 
} 

.flexParent { 
    display: flex; 
    justify-content: center; 
} 

.flexChildren { 
    align-self: center; 
}