Выравнивание значка дерева деревьев как вертикальный центр

Question

Я пытаюсь поместить значок файла в вертикальном положении в центре.

смотрите на рисунке ниже

Вот является Plunkr

файл Icon и флажок должен быть место в центре, то есть с текстом для лучшего внешнего вида.

Я пробовал использовать 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 и маржами по умолчанию заголовков (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>