콘텐츠와 헤더 정렬

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%;을 필요로하고 wthin 각 테이블은 필요 margin:0 auto;

테이블 부모와 CSS의

사업부 부모 지정된 클래스 추가 :

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

(210)

헤더 사용이 작업을 수행하려면 :

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/