Monday, July 18, 2016

HMTL and CSS - Vertical Alignment

Using CSS to vertically align can be tricky. Here are some situations and the solution that allowed for vertical alignment.

Angular ui-grid and vertically aligning an anchor within a cell:



columnDefs: [{ name: ' ', cellTemplate: '<a href=""
  ng-click="grid.appScope.viewBatch(row.entity)">View</a>',
  cellClass: 'grid-align', width: "6%" },

CSS:

.grid-align {
    displayflex;
    flex-directioncolumn;
    justify-contentcenter;
    text-aligncenter/* horizontal part */
}



Align span and input within div:




No comments: