Html 为什么形式的存在会破坏垂直对齐？

我试图通过引导实现以下布局

icon  |  text                       | button
icon  |  text                       | button
icon  |  text                       | button

这是我目前拥有的代码，它不起作用

<div class="row">
    <img src="icon.png" class="col-sm-2"/>
    <div class="col-sm-7" style="display: inline-block; vertical-align: bottom; background-color: blue;">
        <h4>Text</h4>
    </div>
    <div class="col-sm-2">
        <button type="submit" name="action" value="start" class="btn btn-primary">Button</button>
    </div>
</div>

但是我想要

      |                             | 
icon  |  text                       | button
      |                             |

我发现了一些明显的重复，但没有一个解决它

编辑：我选择了这个解决方案。我在最初的演讲中有点作弊，以为这无关紧要，但现在我感到困惑。这是当前代码

<style>
.va {
    display: inline-block;
    vertical-align: middle;
    float: none;
}   
</style>
<div class="container">
  <div class="row col-sm-offset-2 col-sm-8">
    <div class="row">
        <img src="icon.png" class="col-sm-2 va" />
        <div class="col-sm-7 va"><h4>Text</h4></div>
        <form enctype="multipart/form-data" action="{{base_url}}" method="post" role="form">
                <input type="hidden" name="whatever" value="whatever">
                <div class="col-sm-2 va">
                    <button type="submit" name="action" value="submit" class="btn btn-primary">Submit</button>
                </div>
        </form>
    </div>
  </div>

弗吉尼亚州{
显示：内联块；
垂直对齐：中间对齐；
浮动：无；
}   
正文
提交

---

当form元素处于中时，按钮将在文本下结束。如果我删除表单元素，它将按照我的预期工作。这怎么可能

我想这就是你想要实现的目标。需要注意的是，避免将行和列混合在一起->

，不要将列与内容混合，而是将内容放在列中

工作实例

div.box{
显示：表格；
宽度：100%；
}
弗吉尼亚州分部{
显示：表格单元格；
垂直对齐：中间对齐；
浮动：无；
}
.图标{
高度：50px；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。
提交
Lorem Ipsum只是印刷和排版行业的虚拟文本。
提交
Lorem Ipsum只是印刷和排版行业的虚拟文本。
提交

。。在标有“A”的问题上提问duplicate@DaniP他们中的大多数人都试过了，但都没有成功。选中此选项这可能有助于@DaniP现在我有了文本下的按钮。将其添加为类和使用样式属性之间有区别吗？

<style>
.va {
    display: inline-block;
    vertical-align: middle;
    float: none;
}   
</style>
<div class="container">
  <div class="row col-sm-offset-2 col-sm-8">
    <div class="row">
        <img src="icon.png" class="col-sm-2 va" />
        <div class="col-sm-7 va"><h4>Text</h4></div>
        <form enctype="multipart/form-data" action="{{base_url}}" method="post" role="form">
                <input type="hidden" name="whatever" value="whatever">
                <div class="col-sm-2 va">
                    <button type="submit" name="action" value="submit" class="btn btn-primary">Submit</button>
                </div>
        </form>
    </div>
  </div>