花式树图标对齐为垂直中心

Question

我正在尝试将文件图标垂直放置在中心位置。

请看下图

文件图标和复选框必须居中，即与文本一起放置以获得更好的外观和感觉。

我尝试使用 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

@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>

Answer 2

简单而动态：

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

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

花式树图标对齐为垂直中心

Fancy Tree Icon alignment as vertical center

html

css

fancytree