panel的footer设置为align="center",动态加入内容后，内容没有居中

xixi

                        <div id="LayOutPanel" class="mini-panel" title="布局" style="width: 100%; height: 100%;"
                            borderstyle="border:0;" allowresize="true" showfooter="true" buttons="min max">
                            <div property="footer" align="center">
                                <input type='button' value='1111' style='vertical-align:middle;'/>
                            </div>
                        </div>
原生态地加入一个按钮，该按钮是居中的。

但是通过函数修改了footer中的内容后，就不居中了。
        function SaveButton(row_uid) {
            var row = grid.getRowByUID(row_uid);
            if (row) {
                grid.commitEditRow(row);
            }
            var data = grid.getData();
            var str = "";
            for (var i = 0; i < data.length; i++) {
                str += "<input type='button' value='" + data[i].ButtonName + "' style='vertical-align:middle;'/>";
            }
            mini.get("LayOutPanel").getFooterEl().innerHTML = "";
            mini.get("LayOutPanel").setFooter(str);
        }
请问怎么处理啊？

felt

你可以用工具看下开始的时候footer的结构
解析到界面是footer下面有一层div来控制button居中
你直接替换掉了所以那层div就没了
你拼接的时候再加一层div来控制居中
str += "<div align='center'><input type='button' value='" + data[i].ButtonName + "' style='vertical-align:middle;'/></div>";
这样试试