title: AngularJS ui-Grid text alignment
body: <p>I created a ui-grid in a modal within angualr js. In the modal each tab has its own ui grid.  For this Profile tab I have a grid and I want to align the column titles being modified and originals.  I also want to align the content within the Originals column.  I am new to this, so any help is appreciated.</p>
  
  <p>Code for Profile.js:</p>
  
  <pre><code>var app = angular.module('serviceDesk.restroom-services.profile', []);
  
  app.controller('ProfileCtrl', [ '$scope', '$http', function($scope, $http) {
  
  
  $scope.gridOptions = {
  
  
          showGridFooter: true,
          enableHorizontalScrollbar: 0,
          showColumnFooter: false,
          enableFiltering: false,
          enableColumnMenus: false,
          enableGridMenu: false,
          columnDefs: [
                  { field: 'empty', width: '33%', displayName: ''},
                  { field: 'modified', width: '33%', displayName: 'Modified'},
                  { field: 'original', width: '33%', displayName: 'Originals'},
  
          ],
  
  
  
          data: [{
                                      "empty":"Number of Employees(Daily)",
                                      "modified":"",
                                      "original":"20",
  
                                  },
                                  {
                                      "empty":"Customer Restroom Visits(Daily)",
                                      "modified":"",
                                      "original":"5",
  
                                  },
                                  {
                                      "empty":"Days Open per Week",
                                      "modified":"",
                                      "original":"5",
  
                                  },
                                  {
                                      "empty":"Number of Restrooms",
                                      "modified":"",
                                      "original":"2",
                                  },
                                  {
                                      "empty":"Number of Stalls",
                                      "modified":"",
                                      "original":"2",
                                  },
                                  {
                                      "empty":"Number of Urinals",
                                      "modified":"",
                                      "original":"2",
                                  },
                                  {
                                      "empty":"Delivery Frequency",
                                      "modified":"",
                                      "original":"Weekly Deliveries",
                                  },
                                  {
                                      "empty":"Billing Frequency",
                                      "modified":"",
                                      "original":"Monthly",
                                  }
                                 ],
  
  
          onRegisterApi: function(gridApi) {
                  $scope.gridApi = gridApi;
              }
          };
  
  $http.get("app/views/restroom-services/action/profile/profile.json").success(function(data) {
      $scope.gridOptions.data = data;
  });
  
  
  }
  ]);
  </code></pre>
  
  <p>Not sure if this is needed but here is the code for Profile.html:</p>
  
  <pre><code>&lt;div ng-controller="ProfileCtrl"&gt;
  
  &lt;!--button for profile..
  &lt;div class="users-button-group"&gt;
      &lt;button type="button" class="btn btn-aramark-primary btn-xs" ng-click=""&gt;Revert Profile&lt;/button&gt;
  &lt;/div&gt;
  --&gt;
  
  &lt;div class="modal-body"&gt;
      &lt;div id="grid1" ui-grid="gridOptions" class="grid"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>