Comment puis-je centre un bouton dans un angular-ui-cellule de la grille?

Je définir une colonne comme suit:

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

Résultant dans:

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

Je veux de centre ce bouton verticalement et horizontalement. Horizontalement, les œuvres, mais à la verticale, je ne peux pas sembler obtenir le CSS droit. Voici mon générique de chance:

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

Comment fonctionne un centre de contenu dans une cellule de ce type d'AngularJS grille?

InformationsquelleAutor alphadogg | 2015-06-02
  1. 7

    Utiliser la position relative:

    .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%);
}
    InformationsquelleAutor Kathir
  2. 1

    À l'aide de css flex rendrait les choses beaucoup plus facile (https://css-tricks.com/snippets/css/a-guide-to-flexbox/):

    Supposé que votre 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>

    Vous l'ajouter dans columDefs à votre cellule:

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

    Et enfin utilisation CSS Flex:

    #editBtns {
    height: 100%;
}

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

.flexChildren {
    align-self: center;
}
    InformationsquelleAutor