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>
[color=red]<div id="grid-div" style="text-align: center;"></div>[/color]
结果显示如未命名.jpg
将红色部分替换成<div id="grid-div" style=""></div>则显示正常如1.jpg

初学ext，其原因还不清楚