html - 花式 TreeMap 标对齐为垂直中心

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