ext在div中书写样式text-align:center表头失踪

body中的代码 
<script>
  /*改变颜色*/
   function pctChange(val){
        if(val == 1 ){
            return '<span style="color:blue;">男</span>';
        }else if(val == 0){
            return '<span style="color:red;">女</span>';
        }
        return val;
    }
Ext.onReady(function(){
var data = [
[1,"jessie","25",0,"1984-01-01"],
[2,"tom","25",1,"1984-01-02"],
[3,"rose","25",0,"1984-01-03"],
[4,"Lucy","20",0,"1989-01-01"]];
var store = new Ext.data.SimpleStore({
       data:data,
        fields: [
           {name: 'id'},
           {name: 'name'},
           {name: 'age'},
           {name: 'gender'},
           {name: 'birthday',type:'date',dateFormat:'Y-m-d'}
        ]
    });
    var cmModel =  new Ext.grid.ColumnModel([
  new Ext.grid.RowNumberer(),//自动行号
  {header:'姓名', dataIndex:'name'},
  {header:'年龄',dataIndex:'age'},
  {header:'性别',renderer: pctChange, dataIndex:'gender'},
  {header:'生日',renderer: Ext.util.Format.dateRenderer('Y-d-m'), dataIndex:'birthday'}]);
  cmModel.defaultSortable  = true;
var grid = new Ext.grid.GridPanel({
  title:'测试gridPanel',
  height:200,
  width:430,
  cm:cmModel,
  store:store,
  applyTo:'grid-div'
  });
});
  </script>
  <div id="grid-div" style="text-align: center;"></div>
结果显示如未命名.jpg
将红色部分替换成<div id="grid-div" style=""></div>则显示正常如1.jpg

初学ext，其原因还不清楚