Bootstrap valign内容

Question

我有一段简单的代码，我试图垂直对齐。

JS小提琴：https://jsfiddle.net/3kj44net/

＆＃13;

＆＃13;

.container-fluid {
  padding-left: 20px;
  padding-right: 20px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="header-tool-title">
   <div class="container-fluid">
      <div class="row">
         <div class="col-md-5 vcenter">
            <h1 class="toolTitle"><span name="el_toolName">Tool Name</span> <small class="toolSubTitle">#<span name="el_toolID">244</span></small></h1>
         </div>
         <div class="col-md-7 vcenter">
            <span class="pull-right toolStatus">
               <span class="pull-right">
                  <h4 class="text-right"><span name="el_toolStatus"><a data-content-type="manageDeprecation" name="route">Scheduled for Deprecation</a></span></h4>
               </span>
            </span>
         </div>
      </div>
   </div>
</header>

＆＃13;

＆＃13;

＆＃13;

在下图中，我希望右侧的文字与左侧的文字位于同一级别。

我尝试在内容中添加verticle-align属性，但仍然无法移动。

思想？

Answer 1

您可以使用flex使两列具有相同的大小和

<p style="text-align: center"> your font awesome icon </p>

在你要推到底部的元素上。

这是一个小提琴：

https://jsfiddle.net/3kj44net/6/