팬시 트리 수직 중심으로 아이콘 정렬

Question

파일 아이콘을 가운데 위치에 세로로 배치하려고합니다.

은 아래 이미지를 여기

Plunkr

파일 아이콘이를보고 상자가 더 나은 모습을 위해 텍스트 센터에있는, 즉하고 느껴야 확인하시기 바랍니다.

사용해 보았습니다. vertical-align : middle하지만 행운은 없습니다. 여기

DOM은 소자 구조를 미리

<div id="tree" class="ui-draggable-handle"> 

    <ul class="ui-fancytree fancytree-container fancytree-plain fancytree-ext-edit fancytree-ext-glyph" tabindex="0"> 

     <li class=""> 
      <span class="fancytree-node fancytree-expanded fancytree-exp-n fancytree-ico-e"> 
       <span class="fancytree-expander "></span> 
       <span class="fancytree-checkbox glyphicon glyphicon-unchecked"></span> 
       <span class="fancytree-icon glyphicon glyphicon-file"></span> 
       <span class="fancytree-title"><h1>Format</h1></span> 
      </span> 
     </li> 

     <li class="fancytree-lastsib"> 
      <span class="fancytree-node fancytree-expanded fancytree-lastsib fancytree-exp-nl fancytree-ico-e"> 
       <span class="fancytree-expander "></span> 
       <span class="fancytree-checkbox glyphicon glyphicon-unchecked"></span> 
       <span class="fancytree-icon glyphicon glyphicon-file"></span> 
       <span class="fancytree-title"> 
        <h1>Heading 1</h1> 
       </span> 
      </span> 
     </li> 

    </ul> 

</div> 

덕분이다.

Answer 1

쉬운을 가지고 동적 :으로보기 쉬운 될 수 있도록

span.fancytree-title, 
span.fancytree-icon, 
span.fancytree-expander{ 
    vertical-align: middle; 
} 

https://plnkr.co/edit/Y69kSNUtyKEARF3CfOhh?p=preview

Answer 2

@ Gaurav - 코드의 세로 맞춤을 수정했습니다. 기본적으로, 나는 fancytree에서 제공하는 여백과 내장 스타일 시트를 사용하는 Heading Tags (H1, H2 등)의 기본 여백을 무시하고 있습니다. 보고를 here

<style> 
    span.fancytree-expander, span.fancytree-icon { 
    margin: 5px 0 5px 0; 
    } 
    span.fancytree-title { 
    margin: 5px 0 5px 0; 
    } 
    h1 { 
    margin: -10px 0 5px 0; 
    } 
    h2 { 
    margin: -5px 0 0 0; 
    } 
</style>