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

【问题标题】：Fancy Tree Icon alignment as vertical center花式树图标对齐为垂直中心
【发布时间】：2017-01-21 21:42:52
【问题描述】：

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

请看下图

这里是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>

提前致谢。

【问题讨论】：

请分享您的代码的最小运行副本，以便于查看。
@JVM 添加了有问题的 plunkr。

标签： html css fancytree

【解决方案1】：

简单而动态：

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

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

【讨论】：

【解决方案2】：

@Gaurav - 我已经修复了您的代码的垂直对齐方式。基本上，我使用嵌入式样式表覆盖了由花式树提供的边距和标题标签（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>

【讨论】：

h1 和 h2 标签只是一个说明，我想根据花式树标题排列图标。花式树标题是动态生成的。
标题也可以有不同的字体大小吗？
是的，它是动态生成的，所以很难确定字体大小。