垂直对齐引导行中的跨度

Question

我有一个带有“行”类的引导 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 编辑图像。

谢谢！

Answer 2

是的，你可以做到，但是你必须删除一些引导类并添加两个你自己的类，你可以很容易地设置它。这是代码

.content{
  clear:both;
  display:block;
}
.a{
  display:inlin-block;
  vertical-align:middle;
  width:20%;
}


.b{
  display:inlin-block;
  vertical-align:middle;
  width:80%;
}

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

希望对你有帮助

问候， 萨巴什