css - How do I center a button in an angular-ui-grid cell? -


i define column follows:

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

resulting in:

<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 col.coldef.name">     <div class="ng-scope">         <button ng-click="grid.appscope.rowbuttonhandler(row.entity.id)"></button>     </div> </div> 

i want center button vertically , horizontally. horizontally, works, vertically, can't seem css right. here's generic shot @ it:

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

how 1 center content in cell in kind of angularjs grid?

use relative position:

.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%); } 

Comments

Popular posts from this blog

python - TypeError: start must be a integer -

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

django - Creating multiple model instances in DRF3 -