javascript - 如何将 DocumentFragment 居中对齐？

Question

我创建了一组 9x9 的按钮，但它们位于左上角，我想将它们全部对齐在中心。我尝试过使用 <div>来对齐所有内容，但它不起作用，页面上什么也没有显示。

    var docFrag = document.createDocumentFragment();
    for (var i=0; i < 9 ; i++){ 
        var row = document.createElement("tr") 
        for (var j=0; j < 9 ; j++){ 
                var elem = document.createElement('input');
                elem.className = 'gumb';
                elem.type = 'button';
                ...something...
                docFrag.appendChild(elem); 
            } 
        document.body.appendChild(docFrag); 
        document.body.appendChild(row); 
    } 

Answer 1

使用这个js代替:

// use div to add class to center the elements
var item = document.createElement('div');
item.className = "container";

    for (var i=0; i < 9 ; i++){
        var docFrag = document.createDocumentFragment();
        var row = document.createElement("br") 
        for (var j=0; j < 9 ; j++){ 
                var elem = document.createElement('input');
                elem.className = 'gumb';
                elem.type = 'button';
                docFrag.appendChild(elem); 
            } 
        item.appendChild(docFrag); 
        item.appendChild(row); 
    } 
document.body.appendChild(item)

// make the `container` div full width and center the items in it
.container {
     width: 100%;
     text-align:center;
}