Jak wyśrodkować przycisk w komórce kątowej-ui-grid?

Question

zdefiniować kolumnę, jak następuje:

{ 
    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>' 
} 

skutki:

<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> 

I wycentrować przycisku w pionie i w poziomie. W poziomie, działa, ale w pionie, nie mogę uzyskać prawidłowego kodu CSS. Oto mój ogólny strzał:

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

W jaki sposób jedna centralna zawartość w komórce w tym rodzaju siatki AngularJS?

Answer 1

Zastosowanie względna pozycja:

.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

pomocą CSS Flex stałaby się znacznie łatwiejsze (https://css-tricks.com/snippets/css/a-guide-to-flexbox/):

przypuszczać, że twoja 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> 

You dodaj go do columDefs do swojego LL:

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

I wreszcie użycie CSS Flex:

#editBtns { 
    height: 100%; 
} 

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

.flexChildren { 
    align-self: center; 
}