html - 在 Bootstrap 行中垂直对齐跨度

Question

我有一个带有“行”类的 Bootstrap div，里面有 2 个 div 作为列，A 和 B。

A 包含一个带图标的 span。 B 包含一个高度可变的面板，即使在它加载后，用户可以向它添加东西，它的高度仍然可以增加或变小。

我需要将我的跨度垂直居中，以面板的高度为引用。

这是我的代码:

<div class="row">
    <div class="col-lg-3"><span class="icon-clipboard icon-agenda-item"></span></div>
    <div class="col-lg-9">
        <div class="panel panel-default deletable-panel">
            <div class="panel-heading">
               heading content
            </div>
            <div class="panel-body">
               body content
            </div> 
        </div> 
    </div> 
</div> 

第一部分是现在如何显示，第二部分是我希望它如何显示。如您所见，“内容”是可在线编辑的，因此如果面板变大，跨度也需要调整。

非常感谢!

编辑 1 我必须补充一点，我正在使用 IE。 我尝试了第一个建议，结果是这样的:

Answer 1

我最终使用了这个:

<div class="row">
    <div class="col-lg-1 v-align"><span class="icon-clipboard icon-agenda-item"></span></div>
    <div class="col-lg-10 v-align">
        <div class="panel panel-default deletable-panel">
            <div class="panel-heading">
               heading content
            </div>
            <div class="panel-body">
               body content
            </div> 
        </div> 
    </div> 
</div> 

哪里:

.v-align {
    float: none;
    display: inline-block;
    vertical-align: middle;
}

请注意，添加的两列等于 11，而不是 12。这就是关键!我不知道为什么，但如果我将它保留为 1 和 11(总共 12 个)，它就会显示为 mi edit image。

谢谢!