将标题与内容对齐

Question

我用javascript创建了手风琴。我希望手风琴标题（我的标题）和手风琴内容信息（表格）在中心对齐。但是，我无法弄清楚这一点。

 $.each(myData.offsetFormations, function(i,aut) {
            headerList = '<h3><ul><li contenteditable="true">'+
                '<text class="formationName">'+ aut.FormationName + '</text>'+
                ' | ' +
                '<text class="bitSize">'+this.BitSize.toFixed(2) + '</text>'+
                ' | ' +
                '<text class="bitType">'+this.BitType + '</text>'+
                '</li></ul></h3>';

            wellNameList = '<div><table>';

            $.each(myData.wellList, function(k,mano){
                if(aut.AssociatedwellList.some(function(w) { return w.WellName === mano.WellName; }))
                    {
                    wellNameList += '<td><div>'+ mano.WellName+'</div></td>';
                    }
                    else
                    {
                 wellNameList += '<td style="color:gray;" ><div>'+ mano.WellName+'</div></td>';
                    }
                });

            wellNameList += '</table></div>';

            headerList += '<div>'+wellNameList +'</div>';
            $(headerList).appendTo('#accordion'); 
        });

jsfiddle代码： http://jsfiddle.net/xg7cr0g4/31/

Answer 1

在手风琴内容中，每个表格的父级div需要width:100%;，每张桌子都需要margin:0 auto;

div父级给定的table-parent类和css已添加：

http://jsfiddle.net/xg7cr0g4/33/

要做标题，请使用：

css：

.ui-accordion-header ul { display:inline-block; }

function resizeHeader(){
    var h3Width = $('h3.ui-accordion-header').width();
    var ulWidth = $('h3.ui-accordion-header ul').width();

    var margin =  (h3Width - ulWidth)/2/2;
    $('h3.ui-accordion-header ul').css('margin-left',margin);
}

resizeHeader();

$(window).resize(function(){resizeHeader()});

http://jsfiddle.net/xg7cr0g4/34/