Выровнять заголовок с содержимым

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

В Accordian содержания каждой таблицы родительская ДИВ нужно width:100%;, и каждая таблица wthin ней нуждается margin:0 auto;

Div родитель данный класс таблицы-родителя и 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/