ファンシーツリー垂直方向の中心としてのアイコンの整列

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 - コードの垂直方向の配置を修正しました。基本的には、埋め込みスタイルシートを使用して、見出しタグ（H1、H2など）のfancytreeとデフォルトのマージンによって提供されるマージンをオーバーライドしています。 を見てみましょう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>