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等）的默认边距所提供的边距。看看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>

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

2 个答案: